Easiest Way to Build Webflow Page Transitions

what's up youtube in this video we're going to cover the easiest way to build page transitions in webflow so from your project settings if you navigate to the custom code tab we're looking for the footer code section and here we need to create an opening and closing script tag that looks just like this and then inside that script tag we can paste the custom code from the youtube video description now the only thing we need to change in this custom code is the duration so say once you click on a link on the page you want an animation to occur that's about 500 milliseconds before the page actually changes well in that case you would want to give it a little bit of a buffer like six or seven hundred milliseconds that way that animation has the full time to play out so if we were to create a second um a page transition that lasts a full second i would do something like this to give it a little more time to play out but in this case probably 500 is good for rc so i'll hit save and that's all the custom code we need now we can actually build the page transition we're going to use a class called page transition when we build it out so if i go over to the designer we can start building our transition now i like to basically add a transition inside one of my symbols that way i know for sure it's going to be on every page of the site so for that i'll just drag in a div and any changes i make to this will be made to all of them and then so this dip we need to give a class of page transition and that's going to be our transition so it needs to be fixed that way it's always in view and it needs to cover the full width and height of the screen so with would be a hundred percent height would be a hundred vh for viewport height and then give it a really high z index that way it's on top of everything on the whole page and then usually just a background color if we wanted this to have an animating lottie file inside we could or anything like that um so that is our page transition and by default we probably just want to set it to display none so we can't see it by default um so now from here we need to create anytime we click on one of these links or any link on the site we want something to happen so for that we need to go to the interactions tab and we're actually going to apply this to the page transition div we're going to create a new interaction that's on mouse click or tap and then we'll apply this to the class so it affects every instance of this across the site and then on first click we need to start an animation and we'll create a new animation and this one's just going to be called page out so what happens when we're leaving the page um so we're going to create a couple things by default this is going to need to be block so that way we can see it again and we're also going to move it negative a hundred percent that way it's completely out of view and that needs to be zero seconds duration we don't need that to take up any time this is sort of like an initial state but we're not using the initial states and then we need another move state and then this will move it back to zero percent so back to how it was like i said 0.5 or 500 milliseconds is fine i'll use out court for the easing and then we need to um that should do the trick so i'm also going to once the page loads back in probably change the opacity so my initial state for this one i'm just going to set the opacity to 100 up here at the top with a duration of zero um and that should do the trick so yep it just slides on in and then i can hit save so that is our page out transition and that's all we have to do so now anytime we click on a link on the site that's an internal link that transition is going to happen if it's an external link that transition won't happen and then the only other thing we need to do is once the page loads back in we want a different animation so i'm going to create a new page load animation and then this one i'll start one and i'll call it page load and then i'm gonna open it back up my nav and then this will be targeting the page transition so this time i'm actually going to use my initial states so i want my opacity by default of the class to be a hundred percent and we'll set this as an initial state hide show by default needs to be block and then we want to create a new one and this is going to target the opacity and we'll change the opacity to zero same easing out court and then we'll set the um sort of transition to display none that way it's kind of out of our way we're not going to be clicking on it anything like that and i'll also create a delay on this opacity page 0 of like 0.3 and then that should do the trick so then if we publish this on the live site we will see the change so on the live site our page intro is this opacity fading out if we click on any one of these we should see the the swipe out to click back to the home page it'll swipe in and then fade out

Channel: Timothy Ricks

Views: 16,266

Keywords: webflow, how to, tutorial, lesson, course, easy, simple, easiest, page, transitions, page transitions, interaction, page load, page out, links, internal links only, page fade out, exit, outro, leave, intro, enter, load, animation, quick, fast, best

Id: WylpsNUj7XA

Length: 6min 16sec (376 seconds)

Published: Thu Oct 15 2020