Create a Horizontal Scroll With Snap in WordPress using Motion.page
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