Using Annnimate in Webflow.

Annnimate components export to Webflow as JSON you paste straight into the Designer. Webflow is a secondary format, but it's fully supported.

Step 1

Make GSAP available

A component needs GSAP on the page. The cleanest path is Webflow's native toggle - Site Settings → GSAP - which loads GSAP and its plugins for you. If you prefer, add the script tags to Site Settings → Custom Code → Footer instead.

Step 2

Paste the component into the canvas

On the component's page, open the Webflow tab and copy the JSON. In the Designer, select where it should go and paste. Webflow rebuilds the full structure and every class style from that one paste. You don't style anything by hand, and you don't paste the component's CSS file.

The JSON carries the styles.

The Webflow JSON already includes all class-based styles and responsive breakpoints. Pasting the regular CSS on top would double-style your project. Only paste CSS in Step 3, and only when the page tells you to.

Step 3

Add the script, and CSS if present

Paste the component's JavaScript into Custom Code → Footerso it runs after the markup loads. Some components also ship a small Webflow CSS block under a separate tab. It holds the things the JSON can't carry, like keyframes or font-face. When it's there, paste it into Custom Code → Inside <head> tag, wrapped in a <style> tag.

Inside <head> tag

Good to know

Notes

Publish and the component runs - no Webflow Interactions to rebuild.
Tune it the same way as anywhere else: the data-anm-* attributes live on the elements in the Designer.
If a paste is ever rejected, it's almost always a structural HTML issue. Re-copy from the component page, which always emits valid markup.

NextCustomizing a componentThe data-anm-* attributes you tune in the Designer.NextInstallationGSAP setup for every other stack.