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

One of my frustrations with Webflow transitions is that achieving a good horizontal scroll effect with things like parallax is not possible out of the box. The "while scrolling in view" trigger only works for vertical scroll. So, after some trial and errors, I came up with a setup that gets the job done!

Hokaido is a free template focused on images and horizontal scroll. It's main features are:

1. Works well with CMS - no need to manually tweak any transitions, the horizontal scroll works with any number of CMS elements.

2. Parallax effects - create cool horizontal parallax effects, with the current setup, it just works!

3. Cool page transitions - go from page to page with a smooth transition between different projects.

Want to know how the trick is done? Clone it, change it, make it your own!

Hokaido

Hokaido - Free Horizontal Scrolling Template

In celebration of cross-site copy/paste! - Pre-built elements and interactions for use on new projects. Film 4 style page transitions. Thanks for looking! :-)

Artefact

T.RICKS Bubbles

In this example, we simply update the page url and title instead of reloading the page. Note that Webflow interactions aren't copied over from the next page.


Based on https://kirschberg.co.nz/

Transition Tutorial: https://www.youtube.com/watch?v=fBU4mLX45HU

AJAX Tutorial: https://www.patreon.com/posts/57982049

(No Refresh) Overlapping Page Transition

(No Refresh) Overlapping Page Transitions

I'd like to share with you my first study project. This project shows how to use Barba.js base transition and Webflow interactions together. I spent a few weeks searching for the right parts of custom code and understanding the processes in general. I'll be very grateful for your likes of this project.
To see the custom code I used you need to clone the project and look at the custom code tab in the project settings.
I'll add a project with a custom Barba.js transition soon, so subscribe to my Webflow profile to make sure you don't miss anything.

Barba.js doesn't work in webflow project preview mode.
To see the transition open the live site.

Barba.js base transition + Webflow reinitialization v1.00

Barba JS Base Transition Webflow Reinit

Freelance webdesigner based in Paris, France. 
I help you solve your online visibility challenges and generate more sales by designing custom websites, art direction dedicated to your brand and bespoke digital strategies.

Oh, and I'm a professional photographer specialized in events and brand content too 📸

Here's my personal portfolio, made in Webflow, of course.

Bazil Portfolio - 2022

Bazil - Webdesigner & photographer

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

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

Refokus

Empowering the Webflow Community, Agencies and Marketing Teams with Refokus Tools. A free collection of our in-house tools, adding more functionality to Webflow.

We created Refokus Tools to give back to the community—collecting our knowledge and sharing it one designer, developer, marketer, and brand manager at a time.

Current Tools:
- Social Share
- Time to Read
- Slider Generator
- Page Transitions
- Rich Text Enhancer
- Masonry Layout
- Form Validator
- Image Magnifier
- CMS Filters
- Automatic Tabs
- API Filler (Data)
- CMS Prev/Next
- CMS Load More
- Copy to Clipboard
- CMS Tabs

New tools coming every month! 

Refokus Tools (v2)

Refokus Tools

Watch the tutorial at https://www.youtube.com/watch?v=_ShTm4lK0Hc

Based on https://kirschberg.co.nz/

Liquid Nav Links

Code is in the Project Settings Footer Code.
Based on https://likely-story.co.uk/
Made with https://barba.js.org/ and https://greensock.com/
Note that Webflow interactions will not work on newly visited pages when using Barba.js

Likely Story

ClipPath Page Transition

Uses just a small snippet of custom code to allow the page time to complete the exit transition and then redirects to the new page.

Set your links to preload your pages for even better performance. More info on that here: https://webflow.com/feature/enable-link-prefetching-and-prerendering-to-improve-performance.

✅ Native Interactions
✅ Custom Code

Seamless Page Transition

MM—017: Seamless Page Transition

9 minimal page transitions ready to use 😎

Thanks to @Redleo for the script he used in the page transitions: https://webflow.com/website/simplepagetransitions

Minimal Page Transitions

Hello all… The First Design Direction 001. 

Learn how to create this interesting click and page transition interaction.
Watch Video Tutorial here: https://youtu.be/tlOx18ikuW0


Hope you enjoy.

Design-Direction-001

Design-direction-001

Watch tutorial at https://www.patreon.com/posts/barba-js-gsap-73361039

Barba.js & FLIP

Barba.js & GSAP FLIP

Ghosts Landing Page

Watch the tutorial at https://www.youtube.com/watch?v=XuYO4hY0HhU

• Fixes that pesky page flicker from Webflow initial states
• No need to apply page load interactions to every page
• No need to apply link click interactions to every link
• Disables page scroll during transition
• Fixes Safari back button glitch on Webflow transitions
• Auto excludes anchor, empty, and external links
• Exclude any other link by using a combo class

2021 Page Transitions (Tutorial)

2021 Easy and Perfect Page Transitions

I blended my recent seamless page tabs, along with a phone and background animation to build a fun conversational landing page. The conversations are CMS driven, and load randomly, so you can plug in a bunch of them and create a unique experience for your visitors. 

The portfolio section is a cloneable built by Aaron Rudyk which Icustomized to fit the  theme of this project. Find the original here => https://webflow.com/website/a-project-section-that-slaps

For the contact form, you can thank the folks over at Flowbase. I took one of their popular form templates, and again, made minor modifications to fit the theme. Find the original here => https://webflow.com/website/Webflow-Onboarding-Form-Clone

The site also includes an area to add a custom menu with a Lottie animation as a trigger and the navigation goes from left sidebar to bottom footer for simplicity on mobile devices.

Discover page transitions websites built by the Webflow community

Discover page transitions websites built by the Webflow community