Creating a Scroll Progress Indicator - 3 Versions - Using Motion.page and GSAP 🔥

Hi guys! In this video we will explain how you can create 3 different types of progress bars to indicate where you are on the page. These progress bars are quite popular on famous blog and news websites, and now you can create them in Motion.page. We will be making use of the ScrollTrigger, and we'll also show you some cool CSS tricks for masking and mix-blend-mode, as well as custom code to animate a number in Motion.page as well. If you have any questions, post in the comments below! The custom GSAP code used in this video: innerText: 0, snap:{innerText:0} ------------------------------------------------------- Website: https://motion.page Facebook Group: https://www.facebook.com/groups/motio... Documentation: https://docs.motion.page/ Community: https://community.motion.page/ ------------------------------------------------------- 00:06 - Intro 00:36 - 3 Examples 01:01 - First version setup 03:56 - Open Motion.page 04:16 - Timeline Settings 09:08 - Adding custom GSAP code 10:11 - Vertical Bar Setup 12:55 - Horizontal Bar Setup 14:06 - All Examples in Action 14:25 - Outro