Seamless page transition with Webflow interactions

By Max Chechel

Webflow

IX2

Tutorial

Let's build seamless page transition

‍

Seamless page transition is pretty popular nowadays in web design. I'm going to show how to achieve this effect with native Webflow interactions and just a small Javascript snippet. Of course, we cannot do complex stuff like Barba.js can, but I promise, you'll like the end result! Primarily this will be helpful for Webflowers who don't really want to dirty hands with a lot of custom code.

Loader markup

First, we'll need to build a loader element. I'm going to use simple example here, just absolutely positioned div with some background color and centered logo inside. And here is a small trick, set position values of all sides to 0%, but side from where you want to start animation to auto. Now we need to place this element on each page where we want to see a seamless transition so perhaps we should make a symbol from it. After markup is done and loader placed on all pages we can start to set up animations.

‍

Set up Webflow interactions

I'll use native Webflow interactions to animate loader. Let’s do starting page load animation first. We’ll animate the loader height from 100 vh to 0 vh, so let’s set up the initial height to 100 vh and final height to 0 vh. Choose easing and duration, and please remember duration, we’ll need it later. After interaction is ready you need to apply it on all pages on load.

‍

Now let's do transition animation. I’ll animate the loader from 0 vh to 100 vh, basically, it’s opposite to the starting animation just without initial state. This interaction should be linked to the click on element with a certain class. This means that we should have all links to another pages with the same class. Also, we can set height of the loader to 0vh in designer so it not covers the screen while you are working on the pages(height will be set to 100vh on page load, no worries)

‍

CSS

Let's add CSS to all pages <head> to avoid a flash of the unstyled loader(initial state going to be set with JS from Webflow interaction) in case will be some delay for code from interaction and user will see content behind the loader before animation


.loader-class {height: 100vh;}

‍

JavaScript snippet

And add a little bit of JavaScript for the links. This code will delay before going to the destination page. You should remember duration of the transition animation, write down it in milliseconds and add 100-200 ms just in case. And of course type the name of class which the links have into the variable 'links'

‍



const links = document.querySelectorAll('.link-to-page')
links.forEach(link => {
    link.addEventListener('click',(e)=> {
        e.preventDefault()
        setTimeout(()=>{
            window.location = link.href
        },1600)
    })
})

‍

Let’s wrap this up:

Build loader element and make it a symbol
Place loader on each page
Create interaction for page load
Setup page load interaction on each page
Create transition interaction
Trigger transition interaction to links with the same class on click
Paste CSS into site(all pages) settings head code(insert your loader class)
Paste JS into site(all pages) settings before closing body tag and insert your links class into variable links
Publish website

‍

This is it. Our seamless page transition is ready!

Let's build seamless page transition

Loader markup

Set up Webflow interactions

CSS

JavaScript snippet

Let’s wrap this up:

Let's Connect