How to Use GSAP Correctly in Webflow

Introduction

‍

GSAP is the industry standard for web animation. It is fast, precise, and capable of effects that Webflow's native interactions cannot produce. But most designers who add GSAP to Webflow sites make the same mistakes — too many animations, wrong timing, and interactions that fire at the wrong moment. Used correctly, GSAP adds energy and polish to a site. Used incorrectly, it adds friction and confusion. This guide covers the principles that separate great GSAP implementation from poor execution.

Why GSAP in Webflow Needs Special Handling

‍

Webflow has its own JavaScript runtime. Scripts added without understanding the Webflow environment can fire before the DOM is ready, conflict with Webflow's native interactions, or break in the Designer preview. The correct pattern is to wrap all GSAP code inside window.Webflow.push() — this ensures your code runs after Webflow has fully initialized the page.

The Core Principles of GSAP in Webflow

‍

Always use window.Webflow.push() as your entry point. Never use DOMContentLoaded in a Webflow project — it fires at the wrong time and causes inconsistent behavior. The Webflow runtime handles its own initialization, and your code needs to respect that flow.

‍

Place your script block before the closing </body> tag in Webflow Page Settings under Custom Code. Load GSAP and any plugins via CDN before your custom script — the order matters. GSAP must load first, then ScrollTrigger or other plugins, then your custom code that uses them.

‍

Register plugins immediately at the top of your code. ScrollTrigger, for example, must be registered with gsap.registerPlugin(ScrollTrigger) before any ScrollTrigger instance is created. This prevents runtime errors and ensures the plugin is ready when you need it.

‍

Keep animations purposeful. Every animation should have a reason — it guides attention, signals a state change, or creates a sense of depth. Animation for decoration alone adds load without value. Performance matters more than pizzazz.

‍

Use ease: "power2.out" for elements entering the screen and ease: "power2.in" for elements leaving. This follows the natural physics of how objects move and makes animations feel instinctive rather than mechanical. Easing is what separates professional animations from amateur ones.

‍

Test across devices and browsers. GSAP is performant, but heavy animations on low-end devices will stutter. Use Chrome DevTools throttling to test on slow devices before launch.

‍

Closing Thoughts

‍

GSAP in Webflow is a skill worth developing. The sites that use it well feel alive in a way that native interactions rarely achieve. The key is restraint — knowing what to animate, when to animate it, and when to leave things still. Master GSAP and your work will stand out.

‍

Some Important Takeaway Key points:

‍

• Always use window.Webflow.push() as the entry point.
• Place scripts before </body> in Webflow Page Settings.
• Load CDN scripts in order — GSAP, then plugins, then custom code.
• Register every plugin before using it.
• Animate with purpose — every motion should earn its place.