How I Use GSAP to Bring Webflow Projects to Life

Creating beautiful, functional web pages is one thing, but making them come to life is another. That’s where animation comes in. While Webflow provides me with a powerful visual builder and native interaction tools, I often need more control, smoother transitions, and deeper animation logic. That’s why I integrate GSAP (GreenSock Animation Platform) into my Webflow projects.

In this post, I’ll walk you through how I use GSAP with Webflow to create dynamic, engaging experiences that go far beyond the basics.

‍

Why use GSAP with Webflow?

‍

Webflow is great for visually designing layouts, animations, and interactions. But for more advanced needs, like synchronizing multiple animations, scroll-based effects, or precise timing control, GSAP is a game changer.

‍

1. Precision: Control exactly when, where, and how elements animate.
2. Performance: GSAP animations are highly optimized for smooth motion on all devices.
3. Flexibility: Chain animations, react to scrolling, mouseover, or user input.

‍

How do I add GSAP to my Webflow projects?

To use GSAP in Webflow, I follow this simple setup:

• Enable GSAP CDN

In Webflow, I go to Project Settings > Custom Code > Before the </body> tag and add

             html
             Copy
             Edit
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
             <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

‍
             This makes GSAP and ScrollTrigger available on all pages.

‍

• Write JavaScript in the Embed Element

On certain pages, I add an HTML Embed block at the bottom, then insert custom scripts like this:

‍

             html
            Copy
            Edit
            <script>
            gsap.from(".headline", { y: 50, opacity: 0, duration: 1, ease: "power2.out" });
           </script>

I target Webflow elements using their classes, IDs, or data attributes.

‍

There are 4 ways I use GSAP in real projects

‍

1. Scroll-based animations with ScrollTrigger

           ScrollTrigger is one of the most powerful GSAP tools. I use it to trigger animations when elements appear.

 js
Copy
Edit
gsap.to(".fade-in", {
scrollTrigger: ".fade-in",
y: 0,
opacity: 1,
duration: 1
});

‍

          2. Timeline-based animations

         GSAP timelines allow me to sequence multiple animations and synchronize them perfectly.

‍

  js
Copy
Edit
const tl = gsap.timeline();
tl.from(".hero-title", { y: 50, opacity: 0, duration: 1 })
.from(".hero-subtitle", { y: 50, opacity: 0, duration: 0.8 }, "-=0.6")
.from(".cta-button", { scale: 0, duration: 0.5 }, "-=0.4");

‍

         3.Hover effects that look alive

         Webflow’s hover states are limited. With GSAP, I animate elements on mouseover/out with a natural movement.

‍

js
Copy
Edit
document.querySelector(".card").addEventListener("mouseenter", () => {
gsap.to(".card", { scale: 1.05, duration: 0.3 });
});

‍

        4.Page Loaders and Transitions

        Sometimes I create preload animations or smooth transitions between pages (especially when combining GSAP with Barba.js).

‍

js
Copy
Edit
gsap.to(".loader", {
y: "-100%",
duration: 1,
ease: "expo.inOut"
});

‍

Best practices I follow

‍
To get the most out of GSAP in Webflow, I follow a few important rules:

• Animate only what is visible avoid animating off-screen elements unnecessarily.
• Use semantic class names in Webflow to make targeting elements with JavaScript easier.
• Test on different screen sizes using GSAP's responsive matchMedia() method.
• Keep timelines modular for easier debugging and reuse.

‍

By combining the visual power of Webflow with the animation power of GSAP, I unlock creative potential that is otherwise difficult to achieve. It’s the perfect blend of design and development you don’t have to sacrifice either.

If you’re a designer looking to improve your Webflow animations, GSAP is your secret weapon. Once you get the hang of it, there’s no going back.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍