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

Diego Toda de Oliveira

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 - Free Horizontal Scrolling Template

Timothy Ricks

T.RICKS Bubbles

Kai Jolly

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

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 Transitions

Ilja van Eck

[ Check out the tutorial ]
https://www.youtube.com/watch?v=1l1GNa9ni9w

For my first YouTube video I recreated a pixelated page transition in Webflow, using GSAP and a bit of jQuery. It was originally made for www.vrtlwrld.io – a website designed by Holographik and built by me.

Award-winning Pixelated page transition with GSAP [Cloneable]

Pixelated Agency

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 Reinit

Bazil Hamard

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 - Webdesigner & photographer

Enault Ludovic

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-patisserie.com

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

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

Liquid Nav Links

Digital Butlers

Hello there from Cyprus, Webflow Community! 💪🏻❤️

Our team prepared a FULLY functional, stylish animated blog website template. Initially, we planned to sell it on Webflow Templates Marketplace but then decided it would lose its identity without custom code solutions. This is why we made a decision to give it absolutely FREE 🎁.

What's included in the template:
▪️ Homepage x 2
▪️ About page x 2
▪️ Dynamic Blog post page x 2
▪️ Top topics pop-up x 2
▪️ Contacts x 2
▪️ Search page
▪️ Style Guide

Fully CMS-ready with dynamic tags system. Learn how to use the template as a PRO on our "Recommended Practices" page: https://blog-website-db.webflow.io/recommended-practices.

Figma design file is available via request to hello@digitalbutlers.team.

Feel free to copy and use in your projects 💪🏻 And share your love by clicking "Like 👍🏻".

P.S. If you like our work and want to get more fully FREE templates from us you can buy us a coffee here: https://www.buymeacoffee.com/digitalbutlers

Free Webflow Template 🎁 | Minimalistic Fully-Functional Blog Website

Kevin Haag

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

MM—017: Seamless Page Transition

Harshit Agrawal

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

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

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

ClipPath Page Transition

SLASHMINT

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

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 Easy and Perfect Page Transitions

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

Barba.js & GSAP FLIP

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

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

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

Discover page transitions websites built by the Webflow community

Discover page transitions websites built by the Webflow community