Snap Scrolling

This is a snap scrolling effect that gives you a sort of social media shorts (Tiktok, Youtube shorts..etc) effect. It could be prefect for when you want to convey a high amount of information in a way that doesn't overwhelm the user.

<style> [n-parent] { scroll-snap-type: y mandatory; /* This enables vertical scrolling and snap scrolling */ scroll-behavior: smooth; /* This adds smooth scrolling transition */ scroll-snap-stop: 300s; /* This sets the time duration for the scroll snapping */ height: 100vh; /* This sets the height of the section */ overflow-y: scroll; /* This adds vertical scroll bar when needed */ } [n-parent] > [n-snap] { scroll-snap-align: start; /* This snaps the elements to the start of the snap point */ height: 100vh; /* This sets the height of the elements */ } </style>
Copy Script
Copied!

Get exclusive access

Our team has put in a considerable amount of time and effort to develop these resources, and we are excited to share them with our premium followers.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing, you'll stay ahead of the curve and gain valuable insights into cutting-edge WebFlow techniques.