How to Add Custom Animations to a Webflow Template (With GSAP)

Webflow already has built-in animations.
But sometimes you want smoother motion, cooler effects, or interactions that feel more premium.

That’s where GSAP comes in.

Don’t worry, you don’t need to be a developer to start using it. You just need a basic setup and a few simple ideas.

Let’s break it down.

What Is GSAP (And Why Use It?)

GSAP (GreenSock Animation Platform) is a lightweight animation library used by designers and creative developers to create smooth website animations.

Why people use it with Webflow:

• smoother animations than default interactions
• more control over timing
• advanced scroll effects
• professional motion feel

Think of it as adding cinematic motion to your Webflow site.
‍

Step 1: Add GSAP to Your Webflow Site

You don’t install anything complicated.

Just add the GSAP script.

In Webflow:

1. Open Project Settings
2. Go to Custom Code
3. Paste GSAP CDN inside the Footer Code
   ‍

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

And finally publish your site and GSAP is ready.

That’s the hardest part done.
‍

Step 2: Give Elements Simple Class Names

GSAP targets elements using class names.

So instead of random template classes like:
div-block-37

Rename them to something clear:

• hero-title
• fade-image
• feature-card
• button-primary

Clean class names make animation much easier.
‍

‍

Step 3: Add Your First Animation

Now add a small script inside:

Page Settings → Before </body> tag

Example code:

<script>
gsap.from(".hero-title", {
 y: 40,
 opacity: 0,
 duration: 1,
 ease: "power2.out"
});
</script>

What this does:

• element moves up slightly
• fades in
• animates smoothly on page load

You just created your first custom animation.

‍
Step 4: Animate on Scroll

Most modern websites animate while scrolling.

Add GSAP’s ScrollTrigger plugin:
‍

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

‍

Then add:
‍

gsap.registerPlugin(ScrollTrigger); gsap.from(".feature-card", {
 scrollTrigger: ".feature-card",
 y: 60,
 opacity: 0,
 duration: 1
});

‍

Now elements animate when they enter the screen.

Instant modern feel.

Step 5: Keep Animations Subtle

The biggest mistake?
Too many animations.

Good motion design should:
✔ guide attention
✔ feel smooth
✔ support content
‍

Avoid:

• constant movement
• long delays
• distracting effects

If users notice the animation more than the content, it’s too much.
‍

Where GSAP Works Best in Webflow Templates

Great places to add motion:

• hero section entrance
• feature cards on scroll
• image reveals
• buttons hover effects
• section transitions

You don’t need animation everywhere - just where it adds energy.
‍

Pro Tip: Mix Webflow + GSAP

You don’t have to replace Webflow animations.

Best workflow:

• Use Webflow Interactions for simple effects
• Use GSAP for advanced motion

Together, they create powerful results without heavy coding.
‍

Final Thoughts

Adding GSAP to a Webflow template isn’t about making flashy animations.

It’s about making your site feel:

• smoother
• more modern
• more intentional

Start small:

1. Add GSAP
2. Animate one element
3. Test scroll animations
4. Improve gradually

You’ll quickly turn a standard template into something that feels custom-built.

‍
Also checkout Virtus template, where are we using GSAP and Lenis.js libary for creating a smooth scroll experience.