Marketplace
Made in Webflow

Native Smooth Scroll in Webflow

3213 views
site profile thumbnail

Description

hello. I think I found a way to create the smooth scrolling effect natively in Webflow. The way it works is to wrap all content inside a sticky wrapper (content__wrapper), which itself is inside a wrapper (s__scroll) with a set height. The outermost wrapper has a "while scrolling in view" interaction that pushes all content upwards while scrolling down, together with a 90% smoothing. Sounds confusing? Well it kinda is. I'm not 100% sure why this works. Some notes: The outermost wrapper (s__scroll) needs a set height. You have to manually set this height so that it fits the height of whatever content you're using on your site. It shouldn't be exactly the height of your content, but a bit shorter (This site is 1200vh in height, and s__scroll is 900vh). - You want to make sure all your scroll interactions have the same smoothing as the smooth scroll interaction (in my case 90). I noticed some weird quirks with them otherwise. Clone it, check it out and use it for whatever. 🤙
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.

smoothscrollnativewebflowscrollinteraction

More by Robin Granqvist

See profile
View details
Section Scroll Interactions using Scrollify.js & native Webflow interactions
505
2.1k