The short verdict
- Webflow’s built-in interactions are best for motion the team may want to adjust visually.
- GSAP in custom code is best for complex sequences, shared logic and fine control.
- Most of our sites use both, with a clear rule for which goes where.
01The two options
Webflow Interactions are built in the Designer with a visual timeline: pick a trigger, like a click, hover, scroll or page load, and set what changes. Webflow acquired GSAP in 2024, and its newer interactions are built on GSAP underneath. Features change, so check what your workspace has available.
GSAP in custom code means writing JavaScript with the GSAP library and its plugins, such as ScrollTrigger and SplitText, and adding it to the site through custom code settings. GSAP has been free for all uses since Webflow’s acquisition, plugins included.
02Side by side
| Factor | Webflow Interactions | GSAP code |
|---|---|---|
| Built by | Designers, visually | Developers, in code |
| Edited later by | Anyone with Designer access | Someone who reads JavaScript |
| Simple reveals and hovers | Quick to build | Quick, but needs code |
| Complex sequences | Gets fiddly | Strong |
| Reuse across many elements | Good with classes | Strong, with shared functions |
| Reduced motion and breakpoints | Per interaction | Central, with matchMedia |
03When we use Webflow Interactions
- Hover and click states on buttons, cards and menus.
- Simple scroll reveals applied to a class.
- Motion the client may tweak, like the timing of a section reveal or a dropdown.
- Anything a future designer should be able to find and edit without opening code.
04When we use GSAP code
- Signature sequences: a hero that builds itself, a scroll-driven product story, pinned sections.
- Text effects like splitting headlines into lines or characters, or scrambling labels.
- Shared rules: one function that handles every reveal on the site, with reduced motion and breakpoints handled in one place.
- Motion tied to data or state, like a game or an interactive demo.
This site is an example. The scramble effect on buttons, the section reveals and the blog thumbnails are GSAP code shared across pages, so they behave the same everywhere and switch off together for reduced motion.
“Use the visual tool for motion people will tweak. Use code for motion people will only admire.”
05Keeping both tidy
Mixing the two works as long as each element is animated by one of them, never both. Name interactions clearly in Webflow. Keep custom code in one well-commented file, loaded from the site’s settings, not pasted into embeds on individual pages. Use data attributes like data-reveal to mark what code animates, so a designer can add the effect to a new element without touching the script.
06Questions people ask
Will custom GSAP code break when Webflow updates?
Rarely, if it targets your own classes and attributes rather than Webflow’s internal ones. Load a fixed version of the library.
Can my team edit GSAP animations without a developer?
Not the code itself. With data attributes, they can apply existing effects to new elements, which covers most needs.
Is one faster for visitors than the other?
Not meaningfully. Performance depends on what is animated and how, not which tool set it up.
Can you add motion to my Webflow site?
Yes. Send us the link and we will tell you what we would build, and with which.
