Use Flowboard for repeatable motion
Page-load entrances, simple hover states, click toggles, and basic scroll reveals are good candidates for native interactions.
GSAP to Webflow Interactions Converter
Flowboard can translate supported GSAP motion into native Webflow ix3 interactions, so page-load, click, hover, and simple scroll behavior stay editable in Webflow.
motion.js
gsap.timeline({ paused: true })
.to(".menu", { y: 0, opacity: 1 })
.from(".menu-link", { y: 16, stagger: 0.08 })
ScrollTrigger: { trigger: ".hero", start: "top 75%" }
GSAP page load (2 actions)
Elevate Your Design.
Animate Everything.
Scroll down to see ScrollTrigger in action. Smooth, performant, and completely customisable animations.
Scroll
0.00 / 0.60
GSAP bf4da4e5-da2d...
GSAP 96bd34c7...
What maps today
This page reflects the supported GSAP shapes already present in the Flowboard extension repo today, not a speculative roadmap.
Direct GSAP tweens
Simple `gsap.from(...)`, `to(...)`, `fromTo(...)`, and setup `gsap.set(...)` calls can map into native interaction steps.
Click and hover triggers
Straightforward click, mouseenter, mouseleave, and simple toggle handlers can become native Webflow triggers.
ScrollTrigger support
Selector-based `ScrollTrigger` configs with `start`, `end`, `scrub`, and `once` are supported in Flowboard’s mapper.
Timeline chains
Simple `gsap.timeline(...)` chains and reversed toggle patterns are recognized when the control flow stays predictable.
SplitText payloads
Simple class-targeted `SplitText.create(...)` and `new SplitText(...)` calls can carry over into native interaction payloads.
Hybrid fallback
When only part of the motion is native-safe, Flowboard maps the supported transform steps and keeps the rest explicit.
Convert supported GSAP into native Webflow interactions
1
Paste markup and GSAP
Bring HTML, CSS, and supported GSAP snippets into Flowboard while you work inside Webflow Designer.
2
Generate native interactions
Flowboard resolves supported selectors and emits Webflow ix3 interactions for load, click, hover, and simple scroll motion.
3
Keep the edge cases visible
Unsupported selectors, plugin features, or non-native styles stay surfaced as warnings instead of becoming broken hidden output.
JavaScript fallbacks
What stays as JavaScript
The extension intentionally leaves unsupported GSAP behavior visible. That is safer than pretending every animation can be flattened into ix3.
If your snippet mixes supported transform motion with unsupported style or runtime logic, Flowboard maps the native-safe subset and flags the rest. That preserves editability without hiding behavior drift.
Non-transform style props
`clipPath`, `visibility`, `backgroundColor`, `color`, and similar style-driven tweens are not fully native yet.
Advanced ScrollTrigger setups
`pin`, `snap`, lifecycle callbacks, custom scrollers, and more complex trigger behavior still sit outside current ix3 coverage.
Complex selectors and control flow
Sibling selectors, attribute selectors, pseudo elements, nested conditionals, and custom playback state are still too loose to map safely.
Broader runtime side effects
Class toggles, DOM mutations, and app-state logic mixed into handlers remain supplemental runtime behavior rather than native ix3.
When to use Flowboard instead of rebuilding interactions manually
Use Flowboard when the GSAP intent is clear enough to map, and use manual rebuilds when the animation depends on custom runtime behavior.
Keep rebuilds for custom systems
Advanced plugins, custom scrollers, callbacks, DOM mutation, and app state are usually better handled as intentional JavaScript.
Use warnings as a planning tool
Flowboard surfaces what mapped and what did not, so you can decide what to keep native and what to refine manually.
Use GSAP where it fits, keep Webflow editable where it matters
Pair this with Flowboard’s HTML to Webflow converter so structure, classes, and supported motion land in the same workflow.