Along with CodeTV, we're running a Hackathon! Create a landing page that really lands. Build with Astro, animate with GSAP and deploy to Webflow Cloud.
Three teams were challenged to build the best landing page possible in four hours. Watch the episode to see how they did. Think you can do better?
The winners will take home a Webflow mechanical Keyboard, a GSAP swag pack, and a cool Keyframers patch.
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)'
});
Every so often, a website catches the internet's attention and gets held up as proof of what the web can be when we put our hearts into the work. Pull out all the stops and build a landing page that makes people stop and say, “Wow.”
Grab the starter template from github, or clone it with this terminal command.
The starter comes with every GSAP plugin wired up and ready to use. Animate on scroll with ScrollTrigger, add physics effects with Physics2D, or explore GSAP's SVG plugins.
You'll be using Astro to build out your landing page. It's a developer friendly JavaScript framework optimized for building fast, content-driven websites.
Webflow is a proud sponsor of Astro
Add some animation magic with GSAP. 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,
}
});Hey! Need help?
Join the Discord
// match driftΔ → 0 · keep tilt level · ease onto the cloud