Streaming live at 10am (PST)

Webflow Workshop #114: Creating a page transition effect


#1

Join us on Tuesday, February 13th at 10am (pacific)
[ Watch live ] [ Join the live chatroom ]

In this workshop, we’ll learn how to create a page transition effect. This effect can give your site a unique feel for visitors. Specifically, we’ll show you how to use a combination of jQuery and Webflow Interactions 2.0 to animate a page wipe before another page loads.

Sites that inspired this topic:


https://thedesigner.jp


Card background image to Story Background animation
#2

#3

Clone the project here and have fun! :smiley:


#4

Hi Nelson, @PixelGeek

Would the update to Jquery 3.3.1 have broken this? It’s not working on your demo.


#5

It’s not working for me either.


#6

Sweet, thanks for the tutorial!

The transition does not seem to work anymore though. It would be amazing if you could update this.

Thanks


#7

this might help: https://webflow.com/blog/how-to-build-page-transitions-in-webflow


#8

Thanks Nelson, the write up is fantastic.
Do you know if this is possible with collection items though?


#9

Thank you @PixelGeek for this great workshop.

Here is my last work using this technic : https://www.vuparunartiste.com/
I just modified a bit the code to target only links with a certain class. This way it doesn’t trigger the animation if a link is an external link opening in a new tab or an in-page link.

<script>
    $('a').click(function(e) {    
        if ($(this).hasClass("to-page")) {
      
           e.preventDefault();
           var goTo = this.getAttribute("href");
      
           window.setTimeout(function(){
               window.location = goTo;
           }, 500);
        }   
  });
</script>

Again thanks for all of these workshops and tutorials which make things fun.