Get started
- 01
- 02
Make it your own
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.
- 03
infostatus IDLE — on pad
logclimb +0 m/s
logdriftΔ +0 m/s → 0
logtilt 0°
loggsap [██████████] 100%
logwind calm
> ▮
✕ click anywhere or press Esc to dismiss · R to fly again
CodeTV Hackathon
Build the best Landing Page
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.
Build with Astro · GSAP · Webflow Winners 3 Prizes Keyboard & GSAP swag Build with Astro · GSAP · Webflow Winners 3 Prizes Keyboard & GSAP swag Build with Astro · GSAP · Webflow Winners 3 Prizes Keyboard & GSAP swag Build with Astro · GSAP · Webflow Winners 3 Prizes Keyboard & GSAP swag Build with Astro · GSAP · Webflow Winners 3 Prizes Keyboard & GSAP swag Build with Astro · GSAP · Webflow Winners 3 Prizes Keyboard & GSAP swag
Watch the Episode
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?
Three Winners
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)'
});
The Challenge
Build a landing page that breaks the internet
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.”
Resources
-
FrameworkYou'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 -
Animation libraryAdd 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,
}
});
// match driftΔ → 0 · keep tilt level · ease onto the cloud