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

Personal website using Locomotive scrolling. 

Webflow Design & Development | Koyi Tsang

Personal portfolio with locomotive scroll

T.RICKS Locomotive Smooth Scroll in Webflow including position fixed, sticky, and CSS interactions. Watch the full tutorial at https://www.youtube.com/watch?v=D-vYtfcz0NI

T.RICKS Locomotive Smooth Scroll JS

T.RICKS Locomotive Smooth Scroll

BOILERPLATE for Locomotive Scroll integration.


👀

locomotiveScroll-imp

Locomotive Scroll ⟋ starter

Revising my boilerplate, needed a scroll so made one.
Smooth Scroll + Mouse Drag Scroll (optional), in less than 200 lines of vanilla JS.


Completely configured by data-attributes for wf.

You can control the scrolling element (data-scroll), a factor for scroll speed (data-factor="{number}" and if mouse dragging is supported (data-mouse="true/false").


It's also webGl ready and supports speed, but for that you'll want to fork the sandbox here (https://codesandbox.io/s/smooth-scroll-2qfif).

(!) Definitely not tested throughly, so use it at your own risk.
(:) Would love feedbacks on breaking cases and strange behaviours.


-- I'm currently working on an actual one that also solves a couple of webflow problems regarding position sticky and while scrolling animations but that's not happening anytime soon. I'll post on twitter when (and if) it's to a publishable state. This one does not. But position sticky is horrible anyway.


👀

Smooth and Drag Scroll

Minimal Smooth and Drag Scroll ⟋ lib

NODES is a Swiss-Based corporate finance firm committed to advancing the field of Life Sciences through advisory and capital raise.

Built with Webflow + Locomotive Scroll + Anime.js + bits and pieces of custom snippets.

Check out the live site here: https://www.nodesadvisors.com

Nodes Advisors

Here's another weirdly trippy scrolling animation.

I finally figured out how to do layered section scrolling using Locomotive & Gsap. It also plays around with randomized scolling speed dynamically added to each letter in the words in each section.

I kinda like it.

Another Trippy Smooth Scroll Background & Gsap Letter Animation

Another Trippy Smooth Scroll Background and Letter Animation

Don't tell me this doesn't look cooool.

I saw a similar animation on some Awwwards site (can't remember the name) and though it looked amazing.

Smooth scroll by Locomotive.js, fixed section pinning type thingy by Gsap Scrolltrigger. 3D renders by Unsplash.

Smooth Scroll Grid Reveal Animation

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

The Flow Lab

A single-page eCom lander for Double U, a body positive fitness brand I worked on.

Thank you to @timricks for his Locomotive Scroll tutorial

NB this is a prototype, there is no CMS or functioning checkout.

Double U

Double U Fitness

Happy Holidays!

This is my first Spline game that I designed and created. Please allow some time for all the 3D objects to load and enjoy!

Discover locomotive scroll websites built by the Webflow community

Discover locomotive scroll websites built by the Webflow community