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/scr...
👓 Blog Article for this video: https://www.thecodecreative.com/blog/...
📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
https://store.thecodecreative.com/goo...
🔴Subscribe for more free Code Creative videos: : / @thecodecreative
👭Join The Code Creative Community on Facebook:
/ 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 - / thecodecreative
✅ Recommended related videos:
Debouncing Explained
• Debouncing Explained | JavaScript
Memoization Explained
• JavaScript Memoization Made Simple!
Sorting in JavaScript Explained
• JavaScript Comparator Function | Sort...
✅ For business inquiries contact me at [email protected]
Смотрите видео Scroll Trigger Tutorial - 10 - Text Highlighter Animation (GSAP) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь The Code Creative 07 Декабрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14,104 раз и оно понравилось 247 людям.