How to Add GSAP Masked Text Animations in Webflow
Easy add Masked Text animations with GSAP in Webflow text, heading, and paragraph elements when scrolling into view
Install the VisualDX Script
Firstly, make sure you have the VisualDX script before your </body>
Enable GSAP, SplitText Plugin, and ScrollTrigger Plugin
Add GSAP Masked Text Attribute
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Text Block, Paragraph, or Heading that you wish to animate.
Control Animation Duration
Copy this attribute:
Paste the attribute into a Custom Attributes Name field of a Webflow Text Block, Paragraph, or Heading that have the GSAP Masked Text Attribute.
Add a Value in seconds to the Custom Attribute Value field.
e.g.
0.5 = 0.5 second duration
1 = 1 second duration
5 = 5 second duration
Control Animation Stagger
Copy this attribute:
Paste the attribute into a Custom Attributes Name field of a Webflow Text Block, Paragraph, or Heading that have the GSAP Masked Text Attribute.
Add a Value in seconds to the Custom Attribute Value field.
e.g.
0.5 = 0.5 second duration
1 = 1 second duration
5 = 5 second duration
Disable Animation Across Breakpoints
Copy this attribute:
Paste the attribute into a Custom Attributes Name field of a Webflow Text Block, Paragraph, or Heading that have the GSAP Masked Text Attribute.
Add a Value in px which is the breackpoint to wish to prevent GSAP animations
e.g.
478px = Mobile and down, 767px = Mobile Landscape and down, 991px = Tablet and down
Add Slide Up GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Slide Down GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Bounce Up GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Bounce Down GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Rotate Up GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Rotate Down GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Random Up GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Add Random Down GSAP Masked Text Animation
Masked
Text
Animations
Copy this value:
Paste into the GSAP Masked Text Attribute Value field of the the Text Block, Paragraph, or Heading
Sponsor the Magic and
Buy Me a Beer
VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.
Think of it like buying me a pint for keeping your Webflow spells flowing.
You can support it here.
Cheers, legend!
This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.