How to Convert GSAP to Webflow Interactions

Best-results checklist

• Use literal class or ID selectors for animated targets.
• Keep values literal and explicit.
• Prefer gsap.from(...), gsap.fromTo(...), and simple gsap.timeline(...) chains.
• For color/background tweens, use fromTo(...) or seed a start state with gsap.set(...).
• Keep native-safe GSAP in separate <script> blocks from plugins, callbacks, dynamic selectors, and app logic.
• For fallback GSAP tests, make sure the element, CSS, and GSAP selector use the same literal class.
• Check gsapWarnings after conversion. Warnings explain why Flowboard preserved fallback GSAP.

Flowboard-safe GSAP for AI-generated code

AI tools can write the full range of GSAP, but that is not the best goal when the output needs to become native Webflow Interactions. For reliable AI-generated output, use a narrower Flowboard-safe subset.

The goal is not the most advanced GSAP code. The goal is GSAP that Flowboard can map cleanly into native Webflow Interactions.

This AI-safe subset is stricter than Flowboard's full mapper support. Later sections document additional advanced-but-safe patterns, including common wrappers, static selector aliases, safe forEach loops, timeline labels and positions, click and hover controls, and basic ScrollTrigger. For AI-generated code, prefer the simpler rules below unless fallback JavaScript is acceptable.

Recommended AI-safe subset

• gsap.from()
• gsap.to()
• gsap.fromTo()
• gsap.set()
• Simple gsap.timeline() chains
• Literal class selectors such as .hero-title
• Literal ID selectors such as #hero
• Simple descendant selectors where appropriate, such as .hero .title
• Explicit numeric values
• px, %, deg, numeric opacity, and numeric scale values
• Simple numeric stagger values
• Page-load animations
• Simple hover animations
• Simple click animations
• Basic ScrollTrigger where already supported by this guide

Simple numeric stagger

Simple numeric stagger maps cleanly and is a good fit for grouped reveal animations:

gsap.from(".feature-card", {
  y: 32,
  opacity: 0,
  duration: 0.6,
  ease: "power3.out",
  stagger: 0.08
});

Prefer simple numeric values such as 0.05, 0.08, 0.1, or 0.12. Avoid complex stagger logic unless fallback JavaScript is acceptable.

Avoid:

• Function-based stagger values
• Variable-based stagger values
• Random stagger
• Grid stagger
• Index-calculated stagger values

Good AI output

gsap.fromTo(
  ".feature-card",
  { y: "32px", opacity: 0, scale: 0.96 },
  {
    y: "0px",
    opacity: 1,
    scale: 1,
    duration: 0.6,
    ease: "power3.out",
    stagger: 0.08
  }
);

This is a strong native-mapping candidate because the selector is literal, the target values are explicit, the units are supported, opacity and scale are numeric, and stagger is a simple numeric value.

Risky AI output

const selector = `.feature-${activeCategory}`;

gsap.to(selector, {
  y: "2rem",
  opacity: () => Math.random(),
  duration: 0.6,
  repeat: -1,
  yoyo: true,
  stagger: (index) => index * 0.07,
  onComplete: () => console.log("done"),
  scrollTrigger: {
    trigger: selector,
    pin: true
  }
});

This is more likely to fall back because it uses a dynamic selector, unsupported rem units, function-valued animation data, function-based stagger, callbacks, repeat/yoyo, and unsupported ScrollTrigger behavior. Flowboard preserves this kind of behavior as fallback JavaScript instead of forcing it into inaccurate native Webflow Interactions.

What maps natively

Static tween targets

Flowboard supports gsap.to(...), gsap.from(...), and gsap.fromTo(...) when the target is static and the properties are supported.

gsap.to(".box", { x: 100, opacity: 0.5, duration: 0.4 });

gsap.from(".card", { y: 24, opacity: 0, duration: 0.5 });

gsap.fromTo(
  ".hero-title",
  { y: 32, opacity: 0 },
  { y: 0, opacity: 1, duration: 0.7, ease: "power3.out" }
);

Transform values

Supported transforms include numeric values and safe string units. Flowboard maps x/y pixel strings to numeric pixels, percent x/y strings to xPercent/yPercent, and degree strings to numeric rotation values.

gsap.to(".box", {
  x: "20px",
  y: "-20px",
  xPercent: 100,
  rotation: "-45deg",
  scale: 1.1,
  scaleX: 0.95,
  scaleY: 1.05
});

gsap.to(".panel", { x: "100%", y: "-100%" });

Opacity and style properties

Opacity maps as a transform-style IX3 property. Supported color/style properties can map when Flowboard has a safe start and end state.

gsap.to(".box", { opacity: 0 });

gsap.fromTo(
  ".badge",
  { backgroundColor: "#111827", color: "#ffffff" },
  { backgroundColor: "#ffffff", color: "#111827", duration: 0.25 }
);

gsap.set(".badge", { backgroundColor: "#111827" });
gsap.to(".badge", { backgroundColor: "#ffffff", duration: 0.25 });

Direct style-only to(...) tweens without a known start state are preserved as fallback to avoid native output plus residual GSAP replaying the same visual behavior.

Common AI wrappers

Flowboard can unwrap common static wrappers that AI tools often generate.

document.addEventListener("DOMContentLoaded", () => {
  gsap.to(".box", { x: 100 });
});

(() => {
  gsap.from(".hero", { opacity: 0, y: 20 });
})();

gsap.context(() => {
  gsap.to(".card", { y: 0, opacity: 1 });
});

Static selector aliases

Literal selector aliases can map when the selector source is direct and static. Flowboard intentionally does not propagate arbitrary variables such as const selector = ".box"; document.querySelector(selector).

const box = document.querySelector(".box");
gsap.to(box, { x: 100 });

const cards = document.querySelectorAll(".card");
gsap.to(cards, { opacity: 1 });

const hero = document.getElementById("hero");
gsap.to(hero, { y: 20 });

const items = gsap.utils.toArray(".item");
gsap.from(items, { opacity: 0, y: 20 });

const q = gsap.utils.selector(".scope");
gsap.to(q(".child"), { x: 100 });

Safe forEach loops

Simple loops can map when the loop variable comes directly from a literal selector collection and tween values do not depend on index, dataset, conditionals, computed values, or external state.

document.querySelectorAll(".card").forEach((card) => {
  gsap.to(card, { opacity: 1, y: 0 });
});

gsap.utils.toArray(".tile").forEach((tile) => {
  gsap.from(tile, { opacity: 0, y: 20 });
});

Timeline labels and positions

Static labels and relative timeline positions can map. Supported positions include <, >, <+=0.2, >-=0.2, label, label+=0.2, and label-=0.2.

const tl = gsap.timeline();

tl.to(".a", { x: 100, duration: 1 })
  .addLabel("mid")
  .to(".b", { y: 100, duration: 1 }, "mid+=0.2")
  .to(".c", { opacity: 0 }, "<");

Click and hover controls

const panelTl = gsap.timeline({ paused: true, reversed: true });
panelTl.fromTo(".panel", { xPercent: 100 }, { xPercent: 0, duration: 0.35 });

document.querySelector(".panel-toggle").addEventListener("click", () => {
  if (panelTl.reversed()) {
    panelTl.play();
  } else {
    panelTl.reverse();
  }
});

Basic safe ScrollTrigger

Basic ScrollTrigger config can map when it uses static selectors and safe options.

gsap.fromTo(
  ".feature-card",
  { y: 40, opacity: 0 },
  {
    y: 0,
    opacity: 1,
    duration: 0.8,
    scrollTrigger: {
      trigger: ".feature-card",
      start: "top 80%",
      end: "bottom 40%",
      scrub: true
    }
  }
);

What intentionally falls back

Flowboard preserves runtime/fallback GSAP for behavior that cannot be represented faithfully as native IX3.

• Unsupported transform units: rem, em, vh, vw
• These units are preserved as fallback because their pixel value depends on runtime CSS, viewport size, or browser settings. Flowboard does not guess those values for native IX3.
• Expressions: calc(...), var(...), mixed CSS expressions, and template expressions.
• Unsupported string scale values.
• Unsupported direct style properties such as filter.
• Callbacks: onStart, onUpdate, onComplete, and function-valued payloads.
• keyframes, repeat, repeatDelay, repeatRefresh, and yoyo.
• Unsafe or advanced ScrollTrigger behavior such as pin, snap, callbacks, non-literal config, custom scrollers, or variable references.
• Dynamic selectors, string concatenation selectors, function-returned selectors, and selector variables from external state.
• Loops that depend on index, dataset, computed values, conditionals, nested dynamic selectors, or external state.
• Unresolved labels, dynamic position variables, computed timeline positions, tl.call(...), complex tl.add(...), and callback labels.
• Unsupported plugins such as MotionPathPlugin, Flip, Draggable, MorphSVGPlugin, ScrollSmoother, Observer, and InertiaPlugin.

Examples that fall back

gsap.to(".box", { x: "10rem" });
gsap.to(".box", { filter: "blur(4px)" });
gsap.to(".box", { opacity: 0, repeat: -1, yoyo: true });
gsap.to(document.querySelector(`.${name}`), { x: 100 });

document.querySelectorAll(".card").forEach((card, i) => {
  gsap.to(card, { delay: i * 0.1, opacity: 1 });
});

const tl = gsap.timeline();
tl.to(".a", { x: 100 }).to(".b", { filter: "blur(4px)" });

How to split GSAP scripts

Use script block boundaries to keep simple native-safe GSAP away from fallback-only GSAP. This avoids whole-block fallback and duplicate-risk cases where the same original GSAP block would need to be preserved.

Recommended

<script>
  gsap.from(".hero-title", { y: 32, opacity: 0, duration: 0.6 });
  gsap.to(".hero-cta", { scale: 1.05, duration: 0.2 });
</script>

<script>
  gsap.registerPlugin(MotionPathPlugin);
  gsap.to(".orbit-dot", {
    motionPath: { path: "#orbit-path" },
    repeat: -1
  });
</script>

Avoid mixing native-safe and fallback-only GSAP

<script>
  gsap.from(".hero-title", { y: 32, opacity: 0 });
  gsap.to(".orbit-dot", { motionPath: { path: "#orbit-path" } });
</script>

The first script can become native IX3. The second script stays supplemental GSAP. Keeping them separate gives Flowboard the cleanest result without duplicating animation behavior.

Fallback selector classes

When Flowboard preserves a GSAP block as runtime/fallback code, the original GSAP selector still has to find an element on the published page.

For simple literal class selectors, Flowboard preserves the selector class for runtime targeting, even when Webflow displays a different styling class in the Style panel. For example, Webflow may show the element label as motion-card in the Navigator while the active style selector is block. The important runtime check is whether .motion-card still selects the element.

Good fallback test pattern

<div class="motion-card" style="width: 220px; padding: 28px; background: #7c3aed; color: white; border-radius: 12px;">
  Runtime fallback card
</div>

<script>
  gsap.to(".motion-card", {
    x: "8rem",
    rotation: "12deg",
    repeat: -1,
    yoyo: true,
    duration: 0.9,
    ease: "power2.inOut"
  });
</script>

This falls back because rem and repeat/yoyo must be preserved by GSAP, but the selector should still work because the target class is literal and attached to the animated element.

How to tell if mapping worked

• Check the conversion report for mapped GSAP counts.
• Review gsapWarnings for deterministic fallback reasons.
• If a native-safe tween falls back, split it into its own script block and remove dynamic/plugin-heavy behavior.
• If fallback GSAP does not move, check the published page console with document.querySelector(".your-class"). The class in the Navigator and the active Style panel selector may not be the same thing.
• Retry one simple tween at a time, then add complexity back.