Press slash to focus this field, or Escape to return home.
How do you use GSAP?
ToolsGSAP and ScrollTrigger carry the motion on client builds: the scroll-linked sequences and transitions Webflow's native interactions cannot express.
Webflow's own interaction engine covers a great deal, and where it is enough it is what ships: the client can see it, edit it and reason about it without me. Past that point (a scrubbed timeline across several elements, a pin that has to survive a resize, motion that depends on a value the panel cannot read), it becomes GSAP in an embed.
That boundary is checkable, and most client builds end up carrying it. Hashwallet, Esignus and Origin Executives all run GSAP and ScrollTrigger in production, and two of them pair it with Lenis for smoothed scrolling.
Long-form scroll stories are a different discipline and frequently a different stack. The ALTO bottle story runs on Three.js and Lenis over native scroll and loads no GSAP at all. What carries across both is one constraint: the page never takes the scroll away from the person reading it.
The rules I hold
One motion spec per project
Durations, easings and triggers are decided once and written down. Motion that varies for no reason reads as a bug even when every piece of it is deliberate.
The reader keeps the wheel
Native scroll, with the animation lerped toward the real scroll position. Smoothing is allowed, and the reader stays in control of how far the page moves.
Read scroll position in the frame loop
Scroll events go stale in a throttled or backgrounded tab. Polling the position inside the animation frame keeps reading true, and the page survives being left in another tab.
One element, morphed
To move, grow or morph something, transform the one element already on the page. Duplicating it and crossfading loads the same asset twice and always shows the seam, worst of all with video.
Reduced motion gets its own branch
A reduced-motion preference lands on the finished state. That branch gets tested like any other.
If the native engine can do it and the team will maintain it, it stays native
Code is for what the panel cannot express.
Motion is verified on a published page
Embedded scripts do not run on the design canvas, so a canvas that looks inert proves nothing either way.
Built with it
Three of them, and what each one runs:
Hashwallet
GSAP and ScrollTrigger throughout, paired with Lenis for smoothed scrolling.
Esignus
Scroll-linked motion built on GSAP, ScrollTrigger and Lenis.
Origin Executives
GSAP and ScrollTrigger on native scroll, no smoothing layer.