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

Robin Granqvist

Here's a small project that potentionally could be used for some cool stuff. Feel free to clone it and use for whatever you want.

I previously used Anime.js for the letter staggering, but it caused some ugly glitches which were extremely hard to get rid of, so now it's just using Webflow's amazing native interactions instead. 

The section scrolling is made possible by Scrollify.js, which you'll find in the home page's custom body code.

https://twitter.com/robingranqvist_
https://instagram.com/robingranqvist_
https://dribbble.com/robingranqvist

robin.granqvist@hotmail.se 🤙

Section Scroll Interactions using Scrollify.js & native Webflow interactions

Hello,

I'm sleepy, so I felt like designing some kind of smooth interaction thingy. And here we are.

I'm faking the smooth scroll effect by having four fixed sections inside one big section, adding a "while scrolling in view" interaction to the big section and turning smoothing up to 93 (around 90 is the sweet spot for any kind of interactions in my opinion).

Feel free to clone and use for whatever if you like it. Images from Unsplash, some icons from Iconmonstr.

robin.granqvist@hotmail.se

Sleepy Interactions

Made this back when Webflow released sticky to test out. Showed some people who thought it might be useful so thought I'd add it. Enjoy!

sticky-stick-stick-stick-em-up

This is another of these section scroll projects using Scrollify.js. This time I'm using a split screen design layout with some geometrical tennis court illustrations that I made the other day. I really enjoy the vibe of those.

Feel free to clone this project and use it for something much cooler than this example. 🤙

section-scroll-tennis-court

A way to use sticky to make a section show up from behind another section. If you have two divs. For this - 100vh each set to relative, on on top of the other. Then the second one make it sticky - bottom '0'. Make z-index on sticky div lower than first div and this happens.

Section Scroll From Under

Dave

Sample section rotating Out of View interaction using While Scrolling in View trigger type.

Rotation Sections on Scroll

Nuno O. Almeida

Simple page to reveal sections on scroll. 

Has interactions with Opacity or Move.

Reveal Section on Scroll

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=

JseFDRfctUKg1rAF0E6mL1YOHzQe1gVou75Mw8zcVOY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Rf1eI8pDEJSkptFB/XWlj0IN7pQXjrNngR5tBDx8ihI=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

XGglpWsF+VpgOjXfIqzwrxv0n1E+aPydxJbt23zu0UA=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

tOlureLazS6/pYwbqdKmud6Bvaf9nA4m71Uoyrhnjxo=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Best Section Scroll Website Examples & Free Designs

Discover section scroll websites built by the Webflow community

Discover section scroll websites built by the Webflow community