Scroll Trigger Tutorial - 10 - Text Highlighter Animation (GSAP)

Learn how to create a fun, dynamic text highlighting animation using GSAP’s ScrollTrigger plugin. This effect is similar to a Sharpie yellow highlighter which readers and students use to mark interesting and noteworthy passages in a book. In particular, we learn a CSS linear-gradient trick that allows us to animate the width of the yellow background. We incorporate GSAP’s ScrollTrigger as a standalone scrollTrigger and use the toggleClass property as well as the onEnter event callback function. Created by Gregg Fine. #gsap #scrolltrigger #scrollytelling 🎓 New Course Available! "Scrollytelling 101": https://store.thecodecreative.com/scrollytelling 👓 Blog Article for this video: https://www.thecodecreative.com/blog/gsap-scrolltrigger-text-animation-highlighting-text 📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet: https://store.thecodecreative.com/google-secrets-cheat-sheet 🔴Subscribe for more free Code Creative videos: : https://www.youtube.com/channel/UCmOpHGj4JRWCdXhllVTZCVw?sub_confirmation=1 👭Join The Code Creative Community on Facebook: https://www.facebook.com/groups/thecodecreative 🌐 The Code Creative Official Website https://www.thecodecreative.com/ 🎓 The Code Creative Courses https://www.thecodecreative.com/courses ▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬ 00:00 Introduction/Project Demo 00:42 Initial HTML Setup 01:18 Creating DOM Elements 01:36 Wrapping Text with Span Tags 02:00 Initial CSS Setup 02:35 Linear-Gradient Trick 04:57 Creating Animation with CSS Transition 05:35 Manually Testing the Animation 06:13 Incorporating ScrollTrigger 07:10 Creating a Standalone ScrollTrigger Instance 08:05 Using toggleClass 08:46 Enabling Markers 09:25 The onEnter Callback ▬About The Code Creative ▬▬▬▬▬▬▬▬▬▬▬▬ The Code Creative helps web developers learn the fundamentals of programming, algorithms, as well as the latest frameworks and libraries. You can expect web development content that is fun, clear and concise, and keeps you engaged with visuals and a touch of humor. ▬Social Media ▬▬▬▬▬▬▬▬▬▬ ▸ Twitter - @GreggFine ▸ Instagram - /greggfinedev ▸ Facebook - https://www.facebook.com/groups/thecodecreative ✅ Recommended related videos: Debouncing Explained https://www.youtube.com/watch?v=F2zF8fu7aG0&t=215s Memoization Explained https://www.youtube.com/watch?v=dO9LQsIpavM&t=9s Sorting in JavaScript Explained https://www.youtube.com/watch?v=kxUNQtheCxM&t=2s ✅ For business inquiries contact me at [email protected]