Skip to main content

Webflow

Last October, Webflow acquired GSAP to superpower a new era of Webflow interactions, and now they've made ALL of the GSAP plugins free for everyone! 🥳

We're all hard at work making your interaction dreams a reality, but if you want to give GSAP a go with custom code, you're in the right place. All GSAP files can now be included directly from Webflow's settings, making it easier than ever for you to get started and make something amazing.

Video guide

Getting started​

Installing GSAP​

  1. Go to your site in Webflow

  2. Go to the settings panel

  3. Click GSAP integration

  4. Toggle on to include the core GSAP library & use the checkboxes to enable plugins.

Adding Custom Code​

  1. Open Page settings for the page where you’d like to add your code

  2. In the UI find the Before </body> tag section under Custom code

  3. Ensure that you wrap your GSAP code in a script tag, and a DOMContentLoaded event listener.

    <script>
    addEventListener("DOMContentLoaded", (e) => {

      gsap.to('.my-element', {
       rotation: 360,
       duration: 2,
       ease: 'bounce.out'
      })

    });
    </script>

  4. If you're adding plugins, remember to register them!

      gsap.registerPlugin(SplitText) 

      let split = SplitText.create(".text", {type: "chars, words"});

      gsap.from(split.chars, {
        duration: 1, 
        y: 100, 
        autoAlpha: 0, 
        stagger: 0.05
      });
Per page script loading

Currently the Webflow GSAP integration loads GSAP and the plugins on a site-wide level.

If you would rather load GSAP or a specific plugin on a per page basis we recommend using a script tag along with your JS in the page settings.

Resources​

If you're looking for inspo, take a look at all of these amazing Webflow + GSAP sites or check out these official GSAP x Webflow Templates.

From the webflow community​

Osmo - Effects & Tutorials

Advanced GSAP x Webflow setup

custom IDE in Webflow

Web Bae​

1 animation - 4 ways

GSAP 101

Stagger from bottom

Visit Web Bae's channel

Timothy Ricks​

ScrollTrigger Crash Course

GSAP + Container Queries 🤯

GPT for GSAP & Webflow

More great learning content on his site

Contents