ENIT
Home About Learn Blog

Intermediate · 15 lessons

Mastering GSAP Interactions in Webflow

A from-scratch series on Webflow's GSAP-powered interactions — from triggers, actions, and the horizontal timeline to accessible popups, scroll effects, and CMS-driven animations.

Start the course →Back to the map

Webflow’s GSAP integration changed how we build motion — a horizontal timeline, native split text, real staggers, and fine-grained control that used to need custom code. This series takes you from the core vocabulary all the way to production-ready systems.

We start with the mental model — triggers, targets, actions — then build real things: flicker-free page loads, smart hover state machines, an accessible popup, scroll-pinned video, infinite marquees, and CMS-driven animations. Every lesson is practical, no-code-first, and comes with a cloneable so you can pull it apart yourself.

Your route through the course

  1. Master GSAP Interactions in Webflow for Smooth Animations

    I'll help you master GSAP interactions in Webflow by breaking down triggers, actions, and timelines so you can build smooth, seamless page-load animations.

  2. Fix GSAP Page-Load Flicker in Webflow

    Kill the flash of unstyled content before a GSAP page-load animation in Webflow with a reusable CSS-plus-attribute pattern that stays safe when JavaScript is off.

  3. Control GSAP Interactions in Webflow (Speed & Jump To)

    Use GSAP event settings in Webflow — control, speed, and jump to — to pause, resume, freeze, and toggle animations from separate triggers, with no timeline duplication.

  4. Smarter Hover Animations & State Machines in Webflow

    Build hover animations on a single GSAP timeline with play and reverse, then a color-switching state machine with jump to — all inside Webflow, no duplicated interactions.

  5. Repeat, Runs On & Conditional Playback in Webflow

    Master GSAP interaction settings in Webflow — interaction vs action repeat, runs on, and conditional playback — for loops that perform well and respect reduced motion.

  6. Smart Hover Micro-Interactions in Webflow (GSAP + CSS)

    Design five hover-button micro-interactions in Webflow and learn when to reach for GSAP, when plain CSS is enough, and how to combine the two cleanly.

  7. Persistent Light/Dark Mode Toggle in Webflow (GSAP)

    Build a persistent light/dark toggle in Webflow with variable modes, a GSAP class toggle, smooth color transitions, and localStorage that survives reloads.

  8. Build an Accessible GSAP Popup in Webflow (Scroll Lock)

    Build an accessible modal popup in Webflow with GSAP — proper ARIA roles, a reversible open/close timeline, outside-click to close, and mobile-safe scroll lock.

  9. Pin a Video on Scroll in Webflow (Picture-in-Picture)

    Build a picture-in-picture video that pins into the corner on scroll in Webflow, using GSAP scroll triggers, sticky positioning, and a single animated variable.

  10. Build a Reusable Infinite Marquee System in Webflow

    Build an infinite looping marquee in Webflow with GSAP that runs in any direction and is reusable across the whole site via a single attribute — no per-marquee rebuild.

  11. Accessible CMS Sidebar in Webflow (Scroll Lock + Focus Trap)

    Build a CMS-powered sidebar in Webflow with GSAP — per-card content, slide-in, scroll lock, outside-click close, and a real focus trap for keyboard users.

  12. CMS Grow & Scatter Grid Animation in Webflow

    Build a CMS grow-and-scatter gallery in Webflow: images stagger from the center then settle into a responsive grid, driven by one variable, CSS math, and GSAP.

  13. Growing Border Hover Animation in Webflow (CSS + GSAP)

    Build a growing circular border on hover in Webflow with a conic-gradient and an animatable @property; GSAP just toggles a class while CSS does the animation.

  14. Build a 3D CMS Cube Gallery on Scroll in Webflow

    Build a scroll-driven 3D cube gallery in Webflow from CMS data — cross-fading images, split text, and a cube rotating through space with 3D transforms and GSAP.

  15. Responsive Staggered Scroll Animation in Webflow

    Build a responsive staggered scroll animation in Webflow: cards fade and slide in row by row, with the stagger adapting to the column count at every breakpoint.

Intermediate