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

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 Interaction

Section Scroll Interactions using Scrollify.js & native Webflow interactions

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

off brand.

** UPDATE 14/03:
Studio Freight just release V1, so we have added the old script to the page, you will need to update before we manage a package for the new update.**

** UPDATE:
Comment out or remove the stop(), start() and onwheel control functions if you do not intend on using them.**

The good guys over at Studio Freight have recently released a Smooth Scroll library which allows you to finally use native scrolling interactions in Webflow.

We've taken the time to set up all the tricky parts for you, all you need to do is go have fun.

🔗 off brand --> itsoffbrand.com
🔗 lenis --> github.com/studio-freight/lenis
🔗 studio freight --> studiofreight.com

Lenis

Smooth Scroll + Native Scroll Interactions (Lenis)

Hello Webflowers,

We always want to get inspired and experiment all the things that are possible to be done in Webflow, So, we have created a simple scroll interaction. Enjoy!

Jammy-ya Scroll Interaction

Webflow University

Horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left. Scrolling can also be achieved using the up and down arrow keys (spacebar for just scrolling down).

But, here’s the secret — it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll through our project.

Learn how to do this → https://university.webflow.com/lesson/horizontal-scrolling

Horizontal scrolling lesson

Cloneable, custom horizontal scroll interaction

A simple demonstration of vertical scroll interaction to change opacity and image.

Vertical Scroll Change Image

vertical-scroll-change-image

Saw this one video scroll by POSTEVAND that is pretty unique, and doesn't require lottie. Only small file, and simple render of MP4 will do.

Added Locomotive scroll for smoother scroll.
Clone it, and play around with the numbers you see fit. Enjoy!

Video taken from Postevand.com

Video Scroll Interaction (No Lottie)

Video Scroll Interaction

Jin Chuah

This is not a Lottie animation. Made with "While page is scrolling" trigger to animate the falling leaf. The leaf sits on an invisible circular track that rotates and guide the direction of the leaf.

Falling Leaf Scroll Interaction

Falling leaf scroll interaction

Barcelona-based artist Abdel Morched - AKA Habit 701 - contacted me because he wanted to create an immersive online experience that would tell the story of how he got to where he is today.

I used Webflow to create a journey through the cities he's lived in. Each city section allows him to describe his experience and showcase the artwork he created there.

This was a big learning curve for me but also a lot of fun! Let me know what you think :) 

- 

I'm available for freelance work!

This was my first job (started and completed in 2019). I designed & developed the site and custom interactions from scratch, animated the city illustrations into GIFs, designed the logo and shot and edited the portraits.

If you're interested in working together, have any questions or just want to say hello, you can reach me at okeeffesam@gmail.com

Habit 701

Scroll Interaction Portfolio Showcase

Scroll Up & Down to Preview Animation

When a user scrolls down the page and this element comes into view, an animation is triggered. Then a different set of effects are triggered when the element is scrolled out of view.

Discover scroll interaction websites built by the Webflow community

Discover scroll interaction websites built by the Webflow community