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
Смотрите видео Creating a Scroll Progress Indicator - 3 Versions - Using Motion.page and GSAP 🔥 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь MotionPage 06 Ноябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,879 раз и оно понравилось 39 людям.