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: / 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
Watch video Creating a Scroll Progress Indicator - 3 Versions - Using Motion.page and GSAP 🔥 online without registration, duration hours minute second in high quality. This video was added by user MotionPage 06 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,879 once and liked it 39 people.