Skip to main content

Webflow

info

Webflow is great! It's a super user-friendly no-code platform that allows you to build at the speed of thought... But sometimes, a little code can be the thing that takes your project to the next level.

It seems like the Webflow community agrees. Take a look at all of these amazing Webflow sites that are utilising GSAP!

If you're a Webflow whizz and you want to give animating with GSAP a go, we've got your back. here are a selection of useful links and tips to get you going.

Installation​

Using the Core Library & Free plugins​

  1. Open your site in the Designer

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

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

  4. Into that section, add the following...

    First we include the GSAP library with a script tag

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>

    If you want to include plugins, add another script tag with the plugin you need.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>

    Then inside another script tag you can add your custom animation code!

    <script>
     // This tween will rotate an element with a class of .my-element
     gsap.to('.my-element', {
      rotation: 360,
      duration: 2,
      ease: 'bounce.out'
     })
    </script>

And that's the lot! Remember that any custom scripts will only appear on the published site.

Using Club Plugins.​

The Club Plugins do not have CDN links, as this would mean that anyone could use them!

In order to use them you will need to self host the files. Unfortunately, Webflow hasn't made this easy - you can't upload JS files through their platform. But there are a few threads over in the webflow community forum. They recommend uploading .txt files or using an external hosting provider.

Here are some helpful links.

Webflow forum

Webflow university

Video Guides​

from the webflow community
GSAP animations in WebflowAdvanced GSAP x Webflow setupcustom IDE & webflow development

Web Bae tutorials​

from the webflow community
1 animation - 4 waysGSAP 101Stagger from bottom

More great videos from this channel

Contents