How can I implement GreenSock's GSAP ScrollTrigger and TextPlugin together in Webflow?
TL;DR
- Add GSAP, ScrollTrigger, and TextPlugin CDNs in Webflow Project Settings under the "Before </body>" section and publish the site.
- In Webflow Designer, create target elements with proper class names or IDs and use an Embed component to insert your GSAP script with registerPlugin and animation logic.
To integrate GSAP’s ScrollTrigger and TextPlugin in Webflow, you need to load the libraries and trigger animations using Webflow's Embed component.
1. Add GSAP & Plugins
- Go to Webflow Project Settings → Custom Code tab.
- Under Before </body> tag, add CDN links for:
- GSAP Core:
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js - ScrollTrigger:
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js - TextPlugin:
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js - Save changes and publish the site.
2. Create ScrollTrigger Target Elements in Webflow
- Add the element(s) you want to animate in Webflow Designer.
- Give them unique Class Names or IDs, such as
.headline-text. - Include placeholder text if using TextPlugin.
3. Add Embed Code to Page
- Add an Embed component (from the Add Elements panel) to the page, ideally in the same section or at the bottom of the page.
- Inside the Embed, add a
<script>tag with your GSAP code. Example:
<script>
gsap.registerPlugin(ScrollTrigger, TextPlugin);
gsap.to(".headline-text", {
scrollTrigger: {
trigger: ".headline-text",
start: "top 80%",
toggleActions: "play none none none"
},
duration: 2,
text: "Webflow + GSAP is powerful!",
ease: "power2.out"
});
</script>
4. Important Notes
- Only use class selectors or IDs that exist on the page—be sure to match exactly.
- Set initial state if needed using GSAP's
set()or custom styles (e.g., opacity: 0). - Preview in published site, not just Webflow Designer—GSAP libraries load only on publish.
Summary
To use GSAP ScrollTrigger and TextPlugin in Webflow, load the required CDNs in Project Settings, target your Webflow elements using class/ID selectors, and add your GSAP script in an Embed block using the correct registerPlugin() and gsap.to() methods. All animations must be test-run on the published site.
