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

Reverse engineered version of Webflow's very own sticky section component found here: https://webflow.com/solutions/freelancers-agencies.  

Details:
- It's using a proxy div (4x) to call the 'Scroll In/Out of View' interactions
- There is custom code in the footer used for video playback controls (starting/stopping video at specific time based on scroll position)
- 100% credit to Webflow team for design and original implementation

Webflow Sticky Sections (Public)

Webflow Sticky Sections

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.

CSS Scrollify - Pure CSS Scroll Snap Action

Pure CSS Scroll Snap Action like Scrollify

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-FULLSCREEN-STARTER

Sticky Full Screen with Pagination

Just a quick demo to show how to use scrollify when you don't want full-height sections on your page. Made in response to a comment on my full scrollfiy tutorial:

https://www.youtube.com/watch?v=E0jbNJ6M494&ab_channel=KevinHaag

Scrollify 50

Partial Height Sections + Scrollify.js

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

scroll-snap-with-section-links

Checkout my new cloneable project. This design was taken from www.FrontendMentor.io and I built it to practice using Finsweet's new Client-First naming system.

Features 4 pages, some small interactions sprinkled throughout, a custom built price toggle, and a CMS collection.

The provided design didn't include the actual individual "Stories" template design, so the collection doesn't link to anywhere. I challenge you to take a stab at designing the CMS template page and share it with me. I want to see what you come up with!

Photo Snap

photo-snap

Stories Without Endings

A small, simple portfolio site I designed and developed for some friends producing sound design and music. It's based on the Webflow CMS using Finsweet filters. Final site at https://www.waasound.com

waasound.com

Snap

snap-nails

Clonable project for geotargeting website content and messaging. Based on user IP adresses using Geoplugin (with a yearly fee for SSL requests).

geotarget

Geotargetting

This site autodetects the user's operating system and show the appropriate keyboard shortcut for bookmarking the current page.

bookmark-shortcuts

Bookmark shortcuts

The digital hub for the alumni community of former and current students and employees at University College Copenhagen (Københavns Professionshøjskole) in Copenhagen, Denmark.

KP Alumne

University College Copenhagen - KP Alumne

PhotoSnap marketing technology can be used to make any brand go viral. Engage your customers and encourage social media sharing. Generate unlimited customer data through our innovative technology. PhotoSnap is unique and absolutely essential brand marketing for your next event or any social gathering.

Photo Snap's  Playground

Nothing to lose interactive produced by Xenophile Media Inc.
and Snap Media

Mustafa Gedi's First Project

mustafa-gedis-first-project

A new platform for news and articles in Danish.

ajour

AJOUR

Smooth scroll to anchor link after the page is loaded completely instead of quickly snapping to the section.

Hope this helps.

For questions, feel free to reach out.

Discover snap to section websites built by the Webflow community

Discover snap to section websites built by the Webflow community