Perfect Page Transitions in Webflow (2021)

[Music] what's up youtube welcome back to the channel for webflow pros in today's video i'm going to show you how to create perfect page transitions easily in webflow we'll create page transitions that we don't have to apply to every link click one by one or even to every page one by one on page load we'll remove that pesky page flicker on page load caused from webflow initial states making our transitions easy to implement and works seamlessly so let's get started our first step is to drag a div onto the page i'm going to drag it inside my page wrapper and we need to give it a class of transition and then what we'll do is set this to position of fixed to cover the entire screen so the width will be 100 the height will be 100 vh and then we'll give it a high enough z index so that way it's on top our nav and everything else in the designer we're going to keep the set at display none but on the live site the code's going to change this to display block so we can see the transition on page load inside the transition we can paste any content that we want to be seen in this case i have a div called transition content that's set to flexbox it's set to 100 width and height of its parent and inside that i have a background color with a lottie file that starts like this and then it can be played out to kind of disappear like that and then also a logo image right here inside the transition itself we need one more div and we'll give this the class of transition trigger and set it to display none instead of applying a page load interaction to every page on our site or even a link click interaction to every link we'll be able to use the first and second click on our transition trigger div to play the page load in and page load out interactions the first click we'll have to set an interaction and call this one move transition out usually here this is where we would select our transition and give it an initial state of display block so we can see it but because these initial states just don't load fast enough in webflow causing that awkward page flicker our solution is to not use any initial states instead we'll set everything to look the way we want it to look on page load in the designer with the exception of the main transition div which will be set to display none so we can actually see our page content underneath and we'll be turned to display block with custom code if our transition trigger select it on our first click we're creating this move transition out which is going to make this transition fade out when we load up the page we'll start by selecting our logo image here and we'll create a step for opacity this is going to have a delay of 0.5 so it doesn't happen instantly and a duration of 0.3 so it fades out pretty quick and we'll turn the opacity all the way down to zero so when we press play you'll see the logo is there and then it fades out we'll also create a move on our actual transition div itself this is going to have a delay of 0.8 so it waits till the logo is almost done fading out it will also have a duration of 0.8 and an easing of out court then we'll go ahead and move it out negative 101 percent to push it completely up and out of the way till we get something like this at the same time we want to grab our transition lottie and set a lottie right here at the same time as the transition with the same 0.8 delay and then 0.8 duration and we'll play the lottie out to 100 on its timeline if we'd like to see what the lottie looks like when it starts we can also create a start point for the lottie here that starts at 0 but has a duration of 0 seconds since our lottie is going to start like this in the designer anyway this is more so just for us to see how it looks inside the interaction panel now if we play we get this nice smooth fade out there the last thing we need to do is select our transition div and set it to display none when the interaction's over so that way it's out of the way and we can click on elements underneath now we can save this and let's go ahead and create another interaction on second click so we'll create this interaction and call it move transition in this is for whenever we click on one of the links we want to bring the transition back in before we go to the next page this interaction is going to pick up where our last interaction left off so since we just hit the transition we need to show it again so we'll go ahead and set it back to display block so we can see it and since we moved it up and out of the way we need to apply a move that moves it back down zero percent where it started and gives it a delay of 0.5 so it doesn't happen instantly and a duration of 0.4 this time we'll do an easing of outsine then we can select our lottie and then we'll go ahead and apply it here that brings it back to the zero percent mark so it fills up again gives it a duration of 0.4 and lastly we'll select our logo set its opacity here give it a delay of 0.8 a duration of 0.3 and bring the opacity back up to 100 and then we can save this and let's set our transition to display none next i'll leave the link to this custom code in the description of this video let's copy this first part which is the css we'll head over to our project go to project settings we'll head to the custom code tab and we'll paste the css in the head code section here and hit save then we'll copy all our javascript here head back over to our project and paste it in the footer code section here and hit save you'll see it's finding our transition trigger div so it can click on it and then we have an intro duration here in milliseconds the intro duration should match the time of this first click interaction here which is 1.6 or 1600 milliseconds so we'll plug in 1 600 milliseconds here with this value here our page will wait until the intro transition is completely finished before it allows the user to scroll down next we need to get the value of our transition trigger second click or move transition back in this one is 0.8 or 800 milliseconds so we can plug that here in our exit duration this will wait 800 milliseconds before advancing the user to the next page so that we have enough time to see our transition come back in before going to the next page i usually like to create a nice buffer here so that way we don't jump to the next page instantly as soon as the interaction's over but we give it a little bit of breathing room in this case i'll even do 1200 also if we want to use this transition on every page in our site i like to put it inside a global symbol that way any changes i make to it on one page are updated on all pages also in this symbol i usually keep my html embed and my nav bar then i'll go ahead and publish this to check it out now on the live site we get our transition on page load if we click we get the transition in between pages as well with no flickr this code doesn't run the page transition on any links that lead to a separate website on a different domain it also won't run the page transition on any links that open in a new tab no matter if they're to a different site or the same site this way when we visit our previous tab we don't see just a full purple screen lastly the transition won't run on any empty links so that way if we have maybe a hamburger icon it doesn't run whenever we click on one of those link blocks or also any links that anchor us down to another section on the same page if for some reason there's a link to another page on our website that opens in the same tab that we wouldn't like to have the page transition on all we have to do is add the comment class of no dash transition onto it and the transition will get excluded it's also important to remove the transition div from that page if you wouldn't like the intro transition either now clicking to the same page results in the intro and outro transition but this page here gets no transition this code also removes the safari glitch where hitting the back button results in the previous page being loaded in its old state with this code when we visit a new page if we go ahead and hit the back button it's going to reload the previous page instead of staying in its previous state i hope you've enjoyed this tutorial if you'd like to level up quickly in webflow check out our wizards community on patreon as a wizard you'll gain access to exclusive tutorials twice monthly office hours and a searchable tutorial database of all the tutorials i've ever done you'll also be able to join our slack community to ask other wizards questions and submit and vote on tutorial ideas usually around the first of the month is a great time to sign up so i hope to see you there soon and i'll catch you in the next video

Channel: Timothy Ricks

Views: 10,692

Rating: 4.9657536 out of 5

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive

Id: XuYO4hY0HhU

Length: 8min 12sec (492 seconds)

Published: Thu Jul 29 2021