Webflow

🤘 GSAP has been acquired by Webflow to serve as the foundation for Webflow Interactions v3!

We'd love to hear from you about what your hopes are as GSAP joins the Webflow family. What are your ideas? Help us shape the future. We're listening.

Read the announcement

Video guide

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

Open your site in the Designer
Open Page settings for the page where you’d like to add your code
In the UI find the Before </body> tag section under Custom code

Into that section, add the following...

First we include the GSAP library with a script tag

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/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!

Most people self-host these files. Unfortunately, you can't upload JS files through their platform. If you have an external hosting provider you can upload the files there and then reference them with a script tag. If you don't, you can copy-paste the code from the Club Plugin file into Webflow's custom code field, this may not work for all plugins as the field has a character limit.

Tip from a Webflow pro ✨

Need to use Club GSAP files but don't have your own hosting? Don't you worry. You can workaround this by renaming the file extension of your external JS file to a .txt file which can then be uploaded to the Webflow asset panel. Once it's uploaded to the asset panel you can get the direct link that can then be used as a script src in page or project settings. It'll work just like a JS file would in the browser.

We walk through the steps in this video.