00:00
Buy Me a Beer

How to add Split Text animations with GSAP in Webflow

Easily add GSAP Split Text animations to your Webflow Headings, Parageaphs, or Text Blocks

Install the VisualDX Script

Firstly, make sure you have the VisualDX script before your </body>

Enable GSAP and SplitText Plugin

Copy GSAP SplitText Attribute

Copy this attribute:

vdx-gsap-splittext

Paste the attribute into the Custom Attributes Name field of a Webflow Heading, Parageaph, or Text Block.

Body
Text Block
Text Block
Style
Settings
Interactions
Text Block Settings
Custom Attributes
Name
vdx-gsap-splittext
Value

Publish

Text to be GSAP'd

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

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.