Guides / GSAP to Webflow

GSAP to Webflow Interactions, automatically

GSAP code runs in a Webflow Embed, but your team cannot edit that code in the Designer. FlowPaste reads your GSAP calls and makes native Webflow Interactions from them. The triggers and the time values stay the same. You can edit the interactions in the Interactions panel.

Add to Chrome, free →See the demo
0s0.8sy 0y 60Scroll into viewstagger 0.15s
[IN]GSAP
gsap.registerPlugin(ScrollTrigger);
gsap.from(".hero-title", { y: 40, opacity: 0, duration: 0.8 });
gsap.from(".card", {
  y: 60, opacity: 0, stagger: 0.15,
  scrollTrigger: { trigger: ".grid", start: "top 85%" }
});
[OUT]What you get in Webflow
  • gsap.from on load → a Page load interaction with Move and Opacity actions
  • scrollTrigger → a Scroll into view interaction on the trigger element, with the start position
  • scrub: true → a scroll-linked (scrubbed) interaction
  • stagger → staggered start times for each element with the class
  • click, mouseenter and mouseleave listeners → click and hover interactions

Steps

  1. Paste your HTML with the <script> tag that has the GSAP code. On Pro, you can use the separate JS box.
  2. Click Convert & copy. The panel shows the number of animations that FlowPaste converted.
  3. Press ⌘V or Ctrl+V on the canvas. Open the Interactions panel to see and adjust the interactions.

Limits

  • FlowPaste supports these properties: opacity, x, y and scale. FlowPaste keeps other properties (rotation, color, clip-path) as custom code.
  • If you use a custom ease, FlowPaste sets the Webflow default ease. Adjust the ease in the Interactions panel.
  • If you use pin: true, FlowPaste keeps the pin as custom code. Webflow Interactions do not have a pin option.

Questions

Do I still need to load GSAP on the page?

No, not for animations that FlowPaste fully converted. FlowPaste removes the GSAP CDN scripts when no other code uses GSAP.

Do the interactions run in the Designer?

No. Webflow plays interactions in Preview and on the published site. In the Designer, you see the interactions in the Interactions panel.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →