>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,

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

Support the Hairy Eyeball

Share this on