Webflow Workshop #114: Creating a page transition effect

Community resources Webflow events
1

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

wf-workshop-card-114
wf-workshop-card-1141920×1080 96.1 KB

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:

3

Clone the project here and have fun! :smiley:

https://webflow.com/website/transition-workshop

2 Likes
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:

2 Likes
12

Very nice, I just watched your tutorial – thanks for putting it together! I have a few questions, maybe you could help me with:

  1. If I want to customize the transition in a way that different links would display different background colors, what would be the best way to achieve that?

  2. On your example, if users go directly to About URL (not coming from the landing page), is there any way I could disable the “on page load” transition or add a conditional to skip it in those instances?

13

I have questions about the transition, the blue overlay after the transition has taken place, you can still see it when you scroll down. How can you remove this?