Webflow
Try out the first iteration of the GSAP powered Webflow iteractions. Available for free to all Webflow customers.
You’ll get:
- A horizontal timeline with precise, granular controls
- Visual feedback so you can scrub, preview, and perfect
- Built-in support for SplitText, ScrollTrigger, staggers, and more
- The power to reuse animations across your site for faster workflows
Prefer writing code? Get access to the entire GSAP ecosystem, including all the plugins, in your project settings and start coding custom animations right away.
Choose your adventure...
- I'd like to build visually
- I'd like to write code
For product-related issues, technical problems, account questions, and application errors, please go to support.webflow.com and submit a support request.
For design setup, UI/UX practices, website customization, or custom code please reach out via forum.webflow.com.
For more information, see the guide and glossary on Webflow's site.
All GSAP files can now be included directly from Webflow's settings, making it nice and easy to get started and make something amazing.
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 code
-
Ensure that you wrap your GSAP code in a script tag, and a
DOMContentLoadedevent 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.
