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

Scroll-based effects implemented in Webflow. 

Current Effects:
1. RGB Shift 
2. Stretch Scroll
3. Mix-Blend
4. Video Scrubbing*
5. Skew Velocity
6. Looping Scroll*
7. Split Scroll*
8. Split Scroll Loop*
9. Page Auto-Scrolling
10. Drag Slider To Scroll
11. Blur Text On Scroll

* Items with asterisks not optimized on mobile

Author credit + resources (if applicable), are in the custom code panels.

Updated 01/2020

Scroll Effects

Scroll Interactions

Scroll and drag triggered slider jam packed with some pretty cool tweens / animations. I modified the original version, by Jesper Landberg, for use in Webflow. 

The native scrollbar is left intact so you should be able to integrate additional native Webflow scroll-based interactions. 

This prototype does not work on mobile devices - Consider Webflow's native slider as a replacement on mobile.

Bouncing Scroll

Scroll Snapping Slider

Cards snap into place as you scroll. The slides change with an interesting reversing effect. 

Position sticky and Webflow interactions give the illusion of scroll snapping.

The component is designed to convert into static slides on mobile to preserve the ease of use. Maybe a horizontal scrolling version might work better?

https://www.veri.co by Joseph Berry inspired this effect.

Scroll Snapping Cards

Webflow build based on this Dribbble shot by Francesco Zagami
https://dribbble.com/shots/15461202-Portfolio-Turi-L-vik-Kirknes

Tutorial for this is live on Patreon
https://www.patreon.com/timothyricks

Vertical Slider

A sticky scrolling component that uses interactions to highlight a few features while you scroll past. It also allows the user to click any of the titles to anchor scroll and to that specific feature.

Sticky Scroll Feature Section

Adds scroll trigger functionality to Webflow's native slider via a simple script in footer. 

Details:

- Cross-browser compatible
- Binds the script’s wheel event within a specific div (via div ID).
- Includes debounce function to ensure the next/prev slide trigger is fired only once per scroll event.

Scroll Slider Utility

Change Slide On Scroll Utility

How to use the Swiper.JS slider with Webflow CMS. Use Case of Swiper JS slider on vertical scroll (mouse control).

Slider-SwiperJS-homepage-example

mouse control scroll for full screen vertical slider with swiperjs library

Bouncing Scroll Slider with Image Hover. Experimental during a bit of downtime.

Bouncing Scroll slider and Image Effect

bouncing-scroll-slider-image-effect

Style your scrollbar however you want for any div/item that has a scrollbar

Discover slider scroll websites built by the Webflow community

Discover slider scroll websites built by the Webflow community