Tips & Tricks
How to create a snap scroll effect
Learn how to create a smooth scroll snap effect using Dev Mode and custom CSS. In this tutorial, we’ll walk through how to configure your sections, apply scroll snap styles, and account for overlapping headers to create a more structured scrolling experience.
Design
6 min

In this video

In this tutorial, we’ll walk through how to implement a scroll snap effect using Dev Mode and custom CSS.



You’ll learn how to:

  • Configure sections for scroll snapping
  • Use viewport height (100vh) correctly
  • Apply scroll snap CSS properties
  • Create smoother scrolling behavior
  • Account for overlapping headers
  • Adjust spacing across breakpoints

This implementation uses custom code, so make sure to create a backup of your site before making changes.



By the end of this tutorial, your sections will snap cleanly into place as users scroll through the page, creating a more consistent browsing experience.