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

Hello everyone!

The Agency - Is a free clonable website made for any marketing or design agency.

This is my first webflow project in which I tried to implement animations and certain features found on the websites of the most powerful agencies in the world.

Inspirations: curberto.com | fleava.com
       
Fonts used: Neuzeitgrolig | Warning | Graphic

Fell free to use this template in any of your projects!

Much more will come!

I hope you like it! :)

Twitter: https://twitter.com/Atwww_
Dribbble: https://dribbble.com/Atwww
Website: https://atwww.studio/

Demo1

The Agency - Cloneable Template

Hey Friends! 👋

Adding smooth scrolling to your webflow sites doesn't need to be complicated.
There are plenty of options to achieve this inertia type scroll effect, but luxy is probably our favourite. 

All that is needed is a small script and a div-block to wrap the page content. Nothing too weird and definitely #nocode friendly. 

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Share the love, support us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under free-use
⦿ Luxy.js from https://min30327.github.io/luxy.js/

Webflow Smooth Scroll (Luxy)

Webflow Smooth Scroll (Luxy.js)

With the new Ghostbusters movie coming, I wanted to build a proper movie site for such an amazing franchise. Celebrating the new and showcasing the originals.

I've also made the project cloneable. I'm new to development and have pulled snippets from multiple different projects. I still have a lot to learn but if this project is helpful to you, that's awesome!!

Features and Accolades
• Mocktober 2020 winner
• CSS Design Awards
  → Special Kudos
  → Best UI Design
  → Best UX Design
  → Best Innovation
• CSS Winner: Site of the Day
• One Page Love
• Muzli 

All visuals belong to their respective owners.

GB-afterlife

Unofficial Ghostbusters Afterlife Website

Personal website using Locomotive scrolling. 

Webflow Design & Development | Koyi Tsang

Personal portfolio with locomotive scroll

Project by Jesper Landberg at https://codepen.io/ReGGae/pen/eYGyLrP

(It doesn't look like this project was built to work on touch devices)

Infinite Grid (All Directions)

Infinite Draggable / Scrollable Grid

I finally finished my Webflow portfolio! Tried to design something minimal but bold at the same time, focusing on clean and smooth interactions, and putting my projects up and center. Happy with the result!

Diegoliv.works

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

off brand.

New Version:
https://lenis-scroll-master.webflow.io/

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

Lenis

Smooth Scroll + Native Scroll Interactions (Lenis)

A small set of ideas on animating images and other elements while smooth scrolling a page in Webflow.

Credits & Source: https://github.com/codrops/SmoothScrollingImageEffects/

Alternative 'Smooth Scroll' implementations can be found here: https://webflow.com/website/gsap-tweenmax-scroll

Smooth Scrolling Image Effects

I finally decided to get my hands dirty and learn ThreeJS + React Three Fiber to give life to my ideas using interactive 3D. This project is the end result of my tests and study.

Highly inspired by the Work Louder(c) Creator Micro pad (https://worklouder.cc/creator-micro/), I created a fictional collab between your favorite website builder and this amazing product for a limited edition with custom shortcuts to improve your workflow.

My process:
- 3D model, materials, lights and animation done in Blender
- Used CodeSandbox Cloud to put everything together in R3F (plus some custom scripts used on the Webflow page via data attritbutes)
- Loaded the generated JS bundle in Webflow using custom code

- YOUTUBE TUTORIAL: https://youtu.be/XOIU3mdR9Sc
- Link to the CodeSandbox template: https://codesandbox.io/p/sandbox/flowboard-r3f-b95nx9

Flowboard

Flowboard - Webflow + ThreeJS template

Redis Agency

In just a year with Webflow, we have launched dozens of projects, won international awards and expanded the team to 6 creative developers. It is about time that we open a separate department for creative development. We are celebrating this by launching the Webflow department website.

This landing page is dedicated to our love for Webflow, our clients and their projects, and our team. It also showcases the new corporate identity of Redis Agency. Noteworthy that smooth scroll and while scrolling in view animations are implemented without code.

Click the link to see it for yourself. Let it Webflow!

Redis Webflow

Redis Agency Webflow

Kubo's uniqueness lies in the combination and enhancement of two senses: olfaction & taste.
This website was created to introduce this concept providing the ability for visitors to buy products and book pastry workshop.
I have made the whole graphic design, brand identity and webdesign.

kubo-v2

kubo-patisserie.com

Some basic text reveals animations based on Anime.js with a smooth scroll using Luxy.js. 

Click on the read more or credits link to reveal more content.

Click on Say hello 👋 to request more. Follow for more clonable.

Text Animation Timeline

Text Animation based on Anime.js

Trying and testing.
--
Clone and have fun!

Smooth scrollbar and smooth scrolling

Smooth scrollbar/smooth scrolling

Hiii everyone , this is one of my favorite section transition , 
You can keep different colors for different sections easily , 

when u open the project , u will not see any think , make sure to create a temporary combo class ( like temp or tempo ) so that you ca set a background color for the section while designing and when done, you can just remove the temporary class , 

Clone it to make it yours...
Follow me for more amazing stuff....
thanks

Section Scroll background transition

Section scroll background transition

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. 🤙

Native Smooth Scroll

Native Smooth Scroll in Webflow

Our Webflow department continues to pick up pace: in just a month, we made an annual report for Amway.
 
The annual report is an important part of the charity foundation's program, and we had to organize it quickly and beautifully with an interactive format. 

We have already done branding, and almost the entire report was made on the basis of ready-made solutions in identity. Using Webflow and adding animations and horizontal scroll led us to a cool and custom landing page of the report.

Годовой отчёт Фонда Amway

Annual report for Amway

This plugin requires a Club Greensock Membership to use in personal or commercial projects.
https://greensock.com/docs/v3/Plugins/ScrollSmoother

Rebuild of https://us.cowboy.com/products/e-bike-cowboy-4