>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

Support the Hairy Eyeball

Share this on