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.
Getting started​
Installing GSAP​
Go to your site in Webflow
Go to the settings panel
Click GSAP integration
Toggle on to include the core GSAP library & use the checkboxes to enable plugins.
Adding Custom Code​
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 codeEnsure 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>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
});
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.