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.


#10

This whole thing isn’t a proper page transition though. If you have a minimal / empty website like in the video this will work, but to do page transitions such as the Who’s JP example at the beginning of the video (or the ones on sites like the AWWWARDS site PixelGeek mentions) you need to use AJAX (or a library with this capability i.e React, Vue, or a page transition JS library) to load the new page in the background (usually triggered on hover of a link before the click event). Every single Tutorial on the web does what Pixel Geek does and it’s deeply misleading. Using the method shown in this video you also need to ensure your site has a white background if it has any sort of proper content. This entire tutorial works on the basis designers don’t know code so they don’t know this is a poor excuse of a hack video and only about 20% of what is actually needed to do this properly.


#11

I totally agree. However, during the streams I do my best to break complex things down to the most basic functions as possible. It is up to the viewers to learn how to build on top of these lessons and learn other things.

Before every stream, I do my best to research and understand an animation or site layout before teaching how to recreate it in Webflow. If something is misleading or could be taught better, I’m happy to see or hear of an example.

With your honest and constructive feedback, we can make these streams better for everyone :slight_smile: