Discover the best snap websites created by professional designers. Get inspired and start planning your perfect snap web design today!

Neue World

NEUE WORLD has created a Snap Scroll for your next project. Feel free to clone it and use it for your upcoming or existing WebFlow Design. Drop us an email if you ever need any assistance hello@neue.world

Snap Scroll by NEUE WORLD

Philipp Roth

CSS Scroll snapping locks the position of the viewport to specific elements on a scrollable container. It's like putting a magnet on top of the top of a section that forces the page to stop scrolling right there.

The property «scroll-snap-type» gives a pure-CSS way to handle this behavior.

Pure CSS Scroll Snap Action like Scrollify

Tony Christos

I wanted to create a full view experience. I wanted to snap the scroll on each section and to show pagination to inform the user where they are at. I mashed up a few tutorials plus a little bit of trial and error to create this starter file. Enjoy and let me know if something could be done better.

there is code injected into the homepage settings before the body. you will need this to make that shit snap.

A few things to note:
• YOU HAVE TO PUBLISH THIS TO MAKE THE SNAPPER WORK
• this is my first project
• it is only optimized for desktop
• it was a pain in the ass but really fun to figure out

Here are videos I used to make this:
https://www.youtube.com/watch?v=o_lWNEevHJo&t=377s
https://www.youtube.com/watch?v=_k4iTbcqPf8&t=483s

Sticky Full Screen with Pagination

Jon Larson

The goal was to create an animation that gives a photo the sensation of snapping together and breaking apart on scroll. I split a photo into five vertical frames with the same image overlaid.

The scroll animation turns opacity up/down at just the right time.

Five Frame Drop - Scroll Animation

Jesper Vestergaard

This will make section links work together with the scroll snapping - Grab the script in the "Before </body> tag" field and add to your one-page site with section links. Don't forget to publish and check it live. It won't work in the regular preview.

scroll-snap-with-section-links

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

6s1k2w6SLnWj64d28WQrv9HQMxjAQ6/qFXIbthFaqKc=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

BEaEBzmJ+dCz7bi9Xenx+kQRiui5/usgymUiFzHdUSk=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Best Snap Website Examples & Free Designs

Discover snap websites built by the Webflow community

Discover snap websites built by the Webflow community