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

Hello,

I'm sleepy, so I felt like designing some kind of smooth interaction thingy. And here we are.

I'm faking the smooth scroll effect by having four fixed sections inside one big section, adding a "while scrolling in view" interaction to the big section and turning smoothing up to 93 (around 90 is the sweet spot for any kind of interactions in my opinion).

Feel free to clone and use for whatever if you like it. Images from Unsplash, some icons from Iconmonstr.

robin.granqvist@hotmail.se

Sleepy Interactions

The first MicroMonday of 2022! And I know, I know—scrolljacking sucks... but here's an example using CSS only, no JS! You could remove the scroll-snapping if you wanted and still have native-only scroll transitions though, if you prefer.

✅ Native Interactions
✅ Custom CSS

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Snapping 3D Slide Transition

MM—016: Snapping 3D Slide Transition

Bobby Rowe is a resource for brands and agencies looking for creative production talent, and an asset for talent looking to work with brands and agencies. 

A lot of fun at lunch but extremely serious over e-mail.

Designed 🎨 by Kendall Gregory, instagram.com/kendallgregory
Developed 👾 in Webflow by Josh Jacobs, webflow.com/joshwork

thickandthin.co

Bobby Rowe

CSS Scroll snapping locks the position of the viewport to specific elements on a scrollable container. It's like putting a magnet on top of the top of a section that forces the page to stop scrolling right there.

The property «scroll-snap-type» gives a pure-CSS way to handle this behavior.

CSS Scrollify - Pure CSS Scroll Snap Action

Pure CSS Scroll Snap Action like Scrollify

Just a quick demo to show how to use scrollify when you don't want full-height sections on your page. Made in response to a comment on my full scrollfiy tutorial:

https://www.youtube.com/watch?v=E0jbNJ6M494&ab_channel=KevinHaag

Scrollify 50

Partial Height Sections + Scrollify.js

******PUBLISH THE SITE FOR IT TO WORK*******

Playing around with scrollify and using it to change "Tabs" on scroll and/or click. You can also use the arrow to switch between the tabs. There is also an Animation for the active tab. 

Let us know if you want a version with more tabs or other functionalities :)

PLAYGROUND: Srollify - Change Tabs on Scroll and/or Click

change-tabs-on-scroll-and-or-click

Just for fun...
my Playground is just that a project with a range of ideas in.

Concepts using Scrollify and pagination menu. 
3D scroll interaction
3D box rotation on scroll

playground

tc-playground - Scrollify, 3D Scroller, 3D animations

We present our new E-commerce healthy dog food landing page.

Our goal was to utilize scrollify on all screen sizes and keep the design fun/simplistic. 

Fully cloneable! We hope you like it. 

Branding concept and assets created by Егор Карих
(https://www.behance.net/b7c456df)

Paw Paw Landing Page

Paw Paw Dog Food E-Commerce Scrollify Landing Page

Hello! This is my UX/UI portfolio showcasing my case studies and animations. Let me know what you guys think!

Justin Mac's Portfolio

UX/UI Portfolio with Animation

Site is based on https://www.love.com/

This is site is developed only for the purpose of learning and experimenting.

ED love

Section Scroll using Scrollify - Everything Design

HeadStarterz

The brand new website of Studio w+e is a multilingual and 100% CMS-driven portfolio site with javascript viewport animations, custom project sliders, fullscreen scollify animation and smooth language changing. The entire content of the page can be controlled by one single cms-collection.

With the greatest possible attention to detail and great passion for design experimentations, Studio w+e realises visual communication solutions that are freaky or classic and always specific. Print - Motion - Branding - Art Direction.

Studio w+e

Studio w+e Basel/Paris - Multilingual Portfolio Website

Shea's Portfolio

sheas-portfolio

Live website for Chainlift with custom Lottie-animated logo in the preloader. Full-page scrolling powered by Scrollify.js.

Chainlift.io

just some auto-animation, dessert market store concept

Macaron

macaron-db0e15

Personal portfolio website for investor / creator Sahil Bloom.

Sahil Bloom

Sahil Bloom — Investor | Entrepreneur | Creator

Josh Jacobs

Thick and Thin are a resource for brands and agencies looking for creative production talent, and an asset for talent looking to work with brands and agencies. 

A lot of fun at lunch but extremely serious over e-mail.

Designed 🎨 by Kendall Gregory, instagram.com/kendallgregory
Developed 👾 in Webflow by Josh Jacobs, webflow.com/joshwork

Discover scrollify websites built by the Webflow community

Discover scrollify websites built by the Webflow community