Along with CodeTV, we ran a Hackathon! Builders created landing pages that really landed, with Astro, GSAP, and Webflow Cloud.
Scroll down to see the winning sites and watch the episode on YouTube.
Three teams were challenged to build the best landing page possible in four hours. Watch the episode to see how they did.
Congratulations to the three Hackathon winners! We hope you enjoy your new Webflow Keyboards and GSAP swag! We were blown away by your creativity. Check out the winning builds below, along with other amazing entries from the community.
const curr = { x: e.clientX, y: e.clientY };
if (!lastPos) {
lastPos = curr;
return;
}
const dx = curr.x - lastPos.x;
const dy = curr.y - lastPos.y;
...
const tl = gsap.timeline();
tl.to(img, { scale: 1, ease: 'back.out(1.7)', duration: 0.6 });
tl.to(img, {
x: dx * 4,
y: dy * 4,
rotation: gsap.utils.random(-50, 50),
ease: 'power4.out',
duration: 1.5
}, '<');
tl.to(img, {
scale: 0,
opacity: 0,
duration: 0.35,
delay: 0.1,
ease: 'back.in(1.5)'
});
Filip's talent knows no bounds! This build stood out for obvious reasons. So much attention to detail, along with serious technical skill. Filip also shares a lot of his process online, so if you're interested in learning how he approaches a project like this, check out this Codrops article breaking down another one of his builds.
This one got our vote for being so unique. The experience is more like a conceptual art piece than a landing page. Absolutely beautiful design and it's all 3D transforms on actual DOM elements - no Three.js here! Amazing work.
This one made all of us laugh. A lot. We felt bad for killing the gnomes, but it had to be done. Well done, Matt, you converted us
Astro is a developer friendly JavaScript framework optimized for building fast, content-driven websites.
Webflow is a proud sponsor of Astro
Whether you're animating UI, SVG or creating immersive WebGL experiences, GSAP has your back.
gsap.from(cards, {
y: '60vh',
yPercent: 100,
rotation: (i) => [-30, 0, 30][i % 3],
ease: 'back.out(1.1)',
stagger: {
from: 'center',
each: 0.1
},
scrollTrigger: {
trigger: '#tools',
start: 'center center',
end: 'bottom+=500px top',
pin: true,
scrub: true,
}
});
// match driftΔ → 0 · keep tilt level · ease onto the cloud