Create Stunning Text Highlight Animations with GSAP ScrollTrigger on Webflow
In this video, we will create a text highlight animation that triggers as you scroll down your Webflow site. We'll be using the magic of GSAP (GreenSock Animation Platform) and SplitType to achieve this sleek effect.
Timeline:
00:00 - Intro
00:31 - Animation Breakdown
01:00 - Why not use word span?
01:11 - Using SplitType.js
02:10 - Adding GSAP snippets
02:40 - Animation snippet
03:57 - Final Result
JS Snippet:
https://www.yar.website/snippets/text...
Project Cloneable:
https://try.webflow.com/gsaptexthighl...
SplitType:
https://www.npmjs.com/package/split-type
GSAP:
https://gsap.com/
Learn Webflow with Yar:
• Website: https://yar.website
• Webflow Partner Page: https://webflow.com/yar
Other Resources:
• Screen Studio: https://screenstudio.lemonsqueezy.com?aff=LLLL7
• Try Webflow: https://try.webflow.com/b0wub7mtu06z
Let's Connect:
• LinkedIn: / yaroshidi
• Twitter: https://x.com/yaroshidi
Questions? Drop them in the comments below!
Make sure to subscribe and hit the notification bell so you don't miss any of the exciting content coming over the next 100 days.