Streaming live at 10am (PST)

Webflow Workshop #114: Creating a page transition effect


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:

Card background image to Story Background animation


Clone the project here and have fun! :smiley:


Hi Nelson, @PixelGeek

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


It’s not working for me either.


Sweet, thanks for the tutorial!

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



this might help:


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


Thank you @PixelGeek for this great workshop.

Here is my last work using this technic :
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.

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

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