Create a Horizontal Scroll With Snap in WordPress using Motion.page

Опубликовано: 25 Май 2023
на канале: MotionPage
11,688
147

Welcome to another official video tutorial for Motion.page!

In today's tutorial, we will learn how to create a section that pins on top of the page during scrolling, and horizontally scrolls inner sections until it unpins and continues with a vertical scrolling. On top of that, you will learn how to easily implement a snapping behaviour to your horizontal scroll with a short snippet that goes into the custom code field.

Custom Code snippet:
snap: 1 / (gsap.utils.toArray(".h-scroll-section").length -1)

Chapters:
00:06 - Intro / Example
01:13 - Edit with Oxygen
01:28 - Create Sections
02:24 - Create the Horizontal Container
03:38 - Create a Pin Trigger
05:19 - Open up Motion.page
05:50 - Pin Settings
07:28 - Create Animation
08:55 - Add GSAP Code for Snap
10:52 - Outro

Don't know Motion.page yet? Learn more at https://motion.page


Смотрите видео Create a Horizontal Scroll With Snap in WordPress using Motion.page онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь MotionPage 25 Май 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 11,688 раз и оно понравилось 147 людям.