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

Info: I disabled the browser's default scroll bar on the desktop breakpoint using Custom CSS. 

You'll find the YouTube Tutorial here: https://youtu.be/l8cjr6lP9yk

Vertical Navbar with Progress Bar

Vertical Navbar for Scrollytelling One Pager with Progress Bar

We build a cool parallax blur scrolling animation that is great to use in your portfolio. Especially as a web designer, you often make longer screenshots of your client projects, which can be showcased very well with this scrolling effect. I use a blurry background, which is basically the same image as in the foreground, but blurred by its filter and gives the whole design a great mood.
The project is as always free to clone in my Webflow Showcases!

Tutorial: https://youtu.be/5NNR5DExNGU

Webflow Scroll-Animation for your Website Portfolio

Blur scroll effect for long screenshots in your portfolio

I created a YouTube tutorial here (german): https://youtu.be/QU6Ux3yZW4U

apple-card

Apple Card Scroll Animation

This Chalet redefines luxury. Get a first impression by scrolling through the floors visualized with modern illustrations inspired by classic Swiss tourism posters.

BelArosa Chalet

GRASS is one of the leading international designers and manufacturers of motion systems in the furniture industry. With an interactive scrollytelling experience the microsite launches the new Vionaro V8 product line.

Find out more about our work: 
https://www.pixelart-agency.com/en/case-studies/

GRASS Vionaro V8

Here's my Day 1 project! I wanted to leave a little simple idea for people to continue with, you'll see it at the end... hoping people will want the bird brain to hang around ;)

Stranded

Clone Comp 2021 Day 1 | Stranded

The Blackpepper Studio is a multidisciplinary branding and design studio. We specialize in branding, packaging design, websites and digital experiences.

The Blackpepper Studio

Let's use GSAP ScrollTrigger and MotionPath to create a cool "scrollytelling" adventure!

Scrollytelling 101: GSAP MotionPath with ScrollTrigger

A simple and clean website that I designed and created for my sister. She started to write a book, so this website is like a virtual shelf. I am very proud of the micro-interactions I was able to do here.

Aleksandra Palki | Toxic

Aleksandra Palki

What is unlawful police violence? The website explains it combining the first results of the research project KviAPol who is doing a study on this topic.
With their permission and support, I used a part of their data and analyses to create this website as my bachelor thesis.

Anzeigeverhalten

Crime reporting behaviour of victims of unlawful police violence in Germany

STILRIDE

stilride

This is a cool Website I made for my company

Revotion GmbH 2021

Scrollytelling Website for IoT Products

Digit-One

To reach out to possible new customers we built a completely animated, scrollytelling webflow pitch onepager (German language). Featuring vertical, horizontal scroll, mouse effects, parallax effects, progress bars, stacking cards, lottie animations and more.

Pitch Digit-One

Web Agency Pitch

When best-selling author Hamza Khan, asked us to help bring his next book to life on the web, we knew we couldn't say no.

"Leadership, Reinvented" is written for the next generation of leaders coming out the pandemic. The book chronicles lessons from modern leaders such as Jay Z, Satya Nadella, Indra Nooyin, and many more.

In order to help Hamza reach the people who need "Leadership, Reinvented" the most, we knew the website had to accomplish a few things:

1. Tease readers with what to expect in the book
2. Build up anticipation and get preorders
3. Stay top of mind until the book launches

To learn how we accomplished this, stay tuned for the full case study!

Leadership, Reinvented

Rannjan Joawn Portfolio

I created this site for an orthopedic surgeon based in Belgium. He specialises in Shoulders — Knees — Hips. This is my way of scrollytelling keeping in mind the user experience and making it easy for users to access any information they require at any moment.

dr-ioandunca

The new moon lamp eCommerce store is finally out from my workspace's vault!

If you enjoy it as much as I did enjoy creating it from scratch, then we might think alike 😆

Thanks for watching!


Discover scrollytelling websites built by the Webflow community

Discover scrollytelling websites built by the Webflow community