How can I implement GreenSock's GSAP ScrollTrigger and TextPlugin together in Webflow?
TL;DR
- Add GSAP, ScrollTrigger, and TextPlugin CDN links to the Footer section in Webflow’s Project Settings and publish the site.
- Assign IDs or classes to target elements and embed a script using gsap.registerPlugin with a ScrollTrigger-based text animation inside the Designer.
To implement GSAP ScrollTrigger and TextPlugin together in Webflow, you need to load both plugins correctly and initialize your GSAP animation within the Webflow environment.
1. Load GSAP and Required Plugins in Webflow
- Go to Project Settings > Custom Code.
- Paste the following CDN links into the Footer section so they load after page content:
- 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 - Click Save. Then Publish your site for changes to take effect.
2. Assign Webflow Elements with IDs or Classes
- Select the element you want to animate.
- Give it a unique class or ID (e.g.,
headline-text). - This element must exist on the page where the animation should trigger.
3. Add Custom Code to Trigger GSAP Animations
- Open the Webflow Designer, go to the page where you want the animation.
- Scroll to the bottom of the page and drag in an Embed element.
- Inside the Embed, paste your GSAP initialization script. Example:
<script> document.addEventListener("DOMContentLoaded", function () { gsap.registerPlugin(ScrollTrigger, TextPlugin); gsap.to("#headline-text", { scrollTrigger: { trigger: "#headline-text", start: "top 80%", // when element top hits 80% from top of viewport toggleActions: "play none none none" }, duration: 2, text: "Your new animated text goes here!", ease: "none" }); });</script>4. Publish the Site
- Webflow preview mode won't execute custom scripts, so you must Publish the site to test.
Summary
To use GSAP ScrollTrigger and TextPlugin in Webflow, load the GSAP libraries via CDN in your project’s Custom Code settings, target elements with IDs or classes in Webflow, and initialize your GSAP animation using ScrollTrigger and text transitions inside an Embed block. Always publish your site to test the result.