Flowboard GSAP Mapping Guide

Best-results checklist

• Use simple class selectors for animated targets.
• Give triggers clear classes or IDs.
• Prefer gsap.from(...) and gsap.fromTo(...).
• For color/background tweens, use fromTo or set a start state with gsap.set(...) first.
• Keep tween values literal and explicit.
• Keep timelines linear and easy to read.
• Use simple page-load, click, hover, or basic ScrollTrigger triggers.

What maps well right now

Authoring rules

1. Class your targets clearly and avoid deep selector chains.
2. Use literal tween values, not computed variables.
3. For style tweens, always provide explicit start and end states.
4. Keep timelines simple and avoid callback-heavy control flow.
5. Keep trigger wiring obvious and direct.

Copy-ready examples

Page load entrance

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

gsap.from(".hero-copy", {
  y: 24,
  opacity: 0,
  duration: 0.6,
  delay: 0.1,
  ease: "power3.out"
});

Click-triggered panel

const panelTl = gsap.timeline({ paused: true, reversed: true });

panelTl.fromTo(
  ".pricing-drawer",
  { yPercent: 12, opacity: 0 },
  { yPercent: 0, opacity: 1, duration: 0.35, ease: "power3.out" }
);

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

ScrollTrigger with explicit states

gsap.fromTo(
  ".feature-card",
  { y: 40, opacity: 0, backgroundColor: "#f3f4f6" },
  {
    y: 0,
    opacity: 1,
    backgroundColor: "#ffffff",
    duration: 0.8,
    ease: "power3.out",
    scrollTrigger: {
      trigger: ".feature-card",
      start: "top 80%",
      end: "bottom 40%",
      scrub: false,
      once: true
    }
  }
);

Patterns to avoid

• Unsupported plugins like MotionPathPlugin, Flip, Draggable, or MorphSVGPlugin
• Advanced ScrollTrigger options like pinning, snap, callbacks, or custom scrollers
• Complex selector patterns and pseudo-element targeting
• Heavy callback logic and state-machine timeline control
• Event handlers that mix mapping tweens with app/DOM side effects

Safe structure for mixed JS

Keep the mapped GSAP tween isolated, then add extra runtime logic in separate lines. This usually gives cleaner native mapping.

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

document.querySelector(".stats-card").addEventListener("click", () => {
  console.log("Card clicked");
});

How to tell if mapping worked

• Check conversion report mapped GSAP counts.
• Review GSAP warnings in the conversion report.
• If mapping is partial, supported tween steps become native while unsupported logic stays as supplemental JS.

If results are weak, simplify in this order:

1. Use direct class selectors.
2. Replace style to(...) tweens with fromTo(...).
3. Remove unsupported plugins/callbacks.
4. Flatten timeline/event logic.
5. Retry one tween at a time, then add complexity back.