Snap Scrolling

How to add Snap Scroll feature in Webflow?

_{Step #1}

Copy the Snap Scroll <script>

Copy the script and paste it into the </body> tag of the particular page. You can do so by clicking on

1. Pages on the left navigation or, by tapping (P) on your keyboard
2. Select the settings icon beside the page you want to add the script in
3. Scroll down, you will see a section called Before </body> tag
4. Paste it here

‍

‍

_{Step #2}

Set Custom Attributes

‍

You will need to add attributes to 2 elements on the page. One is for the parent element & one for the children element.

1. Parent: Add the attribute name of n-parent to the parent element (this is the element that holds all the children element that you want to experience this snap scrolling effect)
2. Children: Add this attribute to the n-snap to any element inside the parent that has the attribute name of n-parent.

‍

_{Step #3}

Publish your site

It's highly recommended to publish your site on staging environment to make sure the script is working. Once you have confirmed it, you can publish it to your main domain.

‍

‍