Create a GSAP-powered timeline animation
Learn how to build a GSAP-powered animation in Webflow — step by step. You’ll follow along as we animate a navbar, text, background image, and CTAs to create a full hero animation sequence.
As we go, we’ll learn about triggers that start animations, targets that define what moves, actions that set what happens, and timeline adjustments that bring everything together.
Video transcript
We're building a GSAP-powered animation sequence — and here's what it looks like in slo-mo. When the page loads, the heading fades and slides in, followed by the subheading, and then the image. It's clean, it's professional, and it's surprisingly easy to set up.
GSAP is an industry-standard JavaScript animation library. It gives you precise control over how animations run — timing, sequence, easing — things that are either tricky or impossible to do with CSS alone or Webflow's built-in interactions. Webflow is a great place to use GSAP because of the flexibility it gives you to build layouts without writing HTML or CSS manually. You build your structure, then hand off the animation to GSAP.
The workflow is: build your layout in Webflow, give elements class names or IDs, add GSAP via custom code, and write a timeline that sequences your animations.
Let's build it. Our page already has a section with a heading, subheading, and image. To target elements with GSAP, we need class names. The heading already has one — let's call it hero-heading. Same for subheading and hero-image. Now let's go to Page Settings and add our custom code.
First, in the head, we'll load GSAP from a CDN. Then in the before-body-end section, we'll write our JavaScript. The core of GSAP is the timeline. We create one with gsap.timeline, then chain animations using .from — this means each element starts from the values we define and animates to its current state.
We'll write from for hero-heading — duration 0.8 seconds, starting with opacity 0 and y of 30 pixels. That's a fade and slight upward slide. Then the subheading, same treatment. Then the image — let's give it a slightly longer duration and maybe a scale effect so it feels a bit more dramatic. By default, GSAP will play these one after another.
Let me save, publish to staging, and preview. There it is. The heading comes in first, then the subheading, then the image scaling up. Clean and sequenced, exactly as written.
A few things worth knowing. GSAP .from animates from the values you set to the element's natural state. .to animates from the natural state to the values you define. .fromTo gives you full control over both. And on a timeline, you can use the position parameter — a number like 0.2 — to overlap animations, or a string like '-=0.2' to start slightly before the previous one ends.
That's GSAP in Webflow — a CDN link, some class names, and a timeline. From here you can sequence anything on the page.
