I was just starting to build the page transitions on the current project, opened youtube, and saw this beautiful tutorial published about 14 hours ago. Really on point. Thank you!
Everytime I hear "what's up RUclips" , my brain primes itself to blown away. 👏👏 I did page transition way differently with the page load interaction on every page.
Hey Rick, thank you for the great Tutorial. There is actually a huge problem with the delayed page loading: It affects the Page loading time for google, which can drastically impact on your google speed rating....so I would recommend to only use the exit duration timer and set the intro duration timer to 0.
Not sure if it is an issue with a recent Webflow update, but this no longer seems to be working. Double-checked by cloning and publishing the tutorial site, and on initial load, the loading screen does not animate out. Seeing the same issue on my own site.
I have the same problem-happened right after the recent Webflow update hit. The part where the transition animation deactivates when the browser window gets resized still works, but the .click function on the .transition-trigger no longer happens. Would be great if someone had a fix for this.
Following the thread. Hopefully T.Ricks comes to the rescue Edit: my client tells me that Mac users aren't experiencing the issue. Don't know if this could help someone with diagnosing this.
Also here's how you can remove the browser scroll bar. So when the page appears back. the content doesnt abruptly get pushed to the left. put this in the head section of your project dashboard- html { overflow: scroll; overflow-x: hidden; } ::-webkit-scrollbar { width: 0px; /* remove scrollbar space / background: transparent; / optional: just make scrollbar invisible / }
Ooof... This was really bugging me. Thanks a lot for providing a solution!! (I also read two options further down, but wouldn't know how to implement them)
Update: I added you're code bellow Timothy's code in the footer. I noticed that half of the time the Lottie would flicker. After removing your code the animation was smooth again. To again try and tackle scrollbar issue, I played with Timothy's instructions below. What worked was removing ".no-scroll-transition {overflow: hidden; position: relative;}" from the header code. Cheers! :D
Hey man-amazing work! You should do a video on naming/organization best practices in webflow. I feel like my pages get disorganized, but I'm not sure how to fix it.
Thank you so much! I built a site for my friend and the page always flick before showing the preloader really frustrated me because I didn't know how to fix it, thanks for making this tutorial to address this problem!
Hey Thimothy, thank you so much for the cool video! A question, does this transition method also work when the animation is not in a loop? For example as PAGE OUT animation the "wave" like in your video and as PAGE ENTRY animation just a normal fade out of the transition div. I just tried that but it seems probably not
Thank you very much Timothy for this very useful tutorial! I have a question I am using Lenis for smooth scrolling and when this loader appears there is a small jerk and scroll bar is shown and again hidden, any tips?
Thank you so much for the tutorial and the code. I managed to get it work with my own animation but unfortunately ended up removing the code. It caused a weird bug with my links pointing to "home" (href="/") : using the script provided when clicking the home link, It would actually stay (or reload?) the same page. I also had problems with the no-transition class which did not stop the transition from happening for links pointing to a section inside the same page. Maybe someone else had similar issue and know how it could be fixed. Anyhow, I really liked the solution and the workflow. Thanks again.
I'm using this on a client's site, but noticed that the scroll bar turns on and off when the transition div is displayed/hidden, which makes the page content noticeably shift left and right at the beginning and end of the transition. Any way to avoid this?
Thank you very much Timothy for this very useful tutorial! Webflow is such a great tool for graphic designers like us and I'm grateful to have tutorials like yours available and with such quality. Keep it up!
I've watched this so many times, it's so helpful! I've got it working but for some reason on 2 of my like 20 pages it just gets "stuck" in the down position. Any ideas? I do have some other finsweet js on a few of the pages but I've really tried to clean things up and I'm not sure why it is doing it on certain pages and not on others. I also checked into things like page wrappers hidden vs overflow etc with no luck. -PS Timothy my kids giggle a little when they hear your intro (like a here goes mom trying to figure something out again so she listens to this guys Webflow videos!) I love your channel!
Wish I could follow along. Every single tutorial of yours is a masterpiece yet takes lots of things for granted, making it impossible to be understood by non pros. Sorry just my really personal experience I have had so far with all of your guides. Now the question, will you sir, ever start a proper class on Awwwards, or Udemy or whatever platform you prefer? I would be very interested and open for paying as much as required.
Hey Timothy, thanks so much for sharing this low code solution. This seems to work perfectly.. except that now ctrl + left click to open in new tab does not work anymore. Somehow middle mouse button click to open in new tab still works though. But I feel more users use ctrl click to open in new tab and affecting this functionality might not be the best for ux.
Hey Timothy, I absolutely LOVE your tutorials! I would really like to use this page transition, but when using the F'inSweet CMS library your code stops working... Do you have any idea why and how to fix it?
On your navigator you have a 'transition-color' div, what is inside that when you expand it? I can't get the layout to work and it feels like it's going to be something silly that I'm missing... Thanks
Love the simplicity of your tutorials Timothy! I am having an issue though, after it is done loading, my scrollbar pops into view (as the page loads and is longer than the viewport) and makes the load a little janky, how did you get around this on your example site? Thanks!
For anyone who has this problem, I found the solution. You need to remove this line from the CSS that goes in the header: .no-scroll-transition {overflow: hidden; position: relative;} This way the scroll bar won't disappear.
Hey Timothy! This is absolutely amazing! Seriously can't express how much this has helped me. I'm having one problem though. Do you have any idea why this code does not properly work with Finsweet's CMS? It seems to not properly load or execute the loading interactions if a page has finsweet's CMS library code in it.
Hey I used this tutorial to build my web page loading and transition. I noticed that it breaks if I want to give another custom animation to another anchor link or button. I'm trying to work around the code to sort it out. Thank you so much!
Hey Timothy! Is there any way to make it load in smoothly when first loading the website? as when you load the page it starts half way through the animation .. thanks man!
Very cool indeed, however it is impossible to practice it without a current hosting plan, that means that you either have to learn to do it on a real project paid by a client, or put your own hosting money into a learning project. If only they made custom code more accessible in Webflow.
Hi Timothy. This is another "element" for my webflow tool library. I will use it definitely. Another question. In your last live video "Building a Micro Site in Webflow" you showed us this great little dropdown. In almost all client project I try to find a way to implement something like this - but not getting there. Now you show me the solution! Is this guy clonable? I'm happy to invest some time in writing the code watching your tutorial but if the code is at hand somewhere this would be great. Thanks for letting me know. Best, Patrick
This is fantastic - thank you!!! One thing I'm struggling with is how to call different transitions (example: one page transition is orange, the other one is blue, etc.) - will your code accommodate that?
The transition is the same for all pages. My first guess is that you could embed custom code for each page to change the colour of the background, for example.
You could probably create various trigger interactions, then set up the trigger interactions to fire differently for each page. Code may have to be changed or updated to reflect class names.
Tim, how to solve the problem with screen rotation on mobile devices? When you turn the screen on a tablet or smartphone, an error occurs that only disappears when we reload the page. It is the problem that as i can see your project alsob have. I will be grateful for your response :)
Thank you very much for the great tutorials! But for some reason I still have the page flickering when the new page loads... I am not using any initial states. The transition is set to display:none. All classes are good, but still ;(
The simplest fix would be to remove the .no-scroll-transition class from the css, but then the page would be able to scroll always. Another possible solution might be to add code like this to the css to try to account for the width of Window’s scrollbar. .section {padding-left: calc(100vw - 100%);}
One way is to add body {width: 100%;} then replace the .no-scroll-transition class to {overflow-y: scroll; position: fixed;}. This way we keep the scrollbar but without scrolling
Another great tutorial Timothy! I've got this working on all pages except my home page. If you visit the site URL directly, the transition stays visible on top of the site content and does not transition out? I guess it's to do with coming from an external source. Any ideas how to fix it?
@timothy I have found there to be a conflicting error with some Finsweet JS that is being used on the home page. I have not found a workaround for this yet...
This is awesome! It is almost perfect for my case. I have a one-pager site, with dynamic pages for my work. So the nav bar is basically for the sections in the homepage, but I still have it in the works pages so people can move fast to any specific section in the homepage. And that's the problem, this works from the homepage to the works, but not the other way around. :(
Hi Tim. Thanks for the tutorial, it's brilliant and just what I was looking for. However, I've created a slightly altered version for my own portfolio website (I've just removed the Lottie element) but it isn't quite working correctly. When the animation comes down from the top on click it instantly appears halfway down the screen. I've checked all of my settings and they seem to be right, I just can't figure out why this is happening. Any advice would be massively appreciated. Thanks
Not sure if you solved this or not, but I was running into the same issue. Double check that in the 'Move Transition In' animation, the Move Transition for the Transition Div is set to a Y value of 0% not 0px - that worked for me.
I am in love with that. Works perfectly. One little thing: when you resize the window size on desktop and scale down to tablet, or smaller breakpoints the transition screen appears and stays static, taking full screen. You need to reload the page to make the animation work. Anyone got an idea to solve it?
I mean i know you want to upload quality content and all and we can learn from you but it's too fast, you never explain why things are done the way they are, never remind of anything. just the final goal of something. we know how you did stuff just some of us don't know their purpose
That "T.RICKS" identifier is absolutely brilliant, especially considering the quality of your advice. Genius!
I was just starting to build the page transitions on the current project, opened youtube, and saw this beautiful tutorial published about 14 hours ago. Really on point. Thank you!
I've said this before, but it bears repeating: Dude, you're the best. This is phenomenal.
Everytime I hear "what's up RUclips" , my brain primes itself to blown away. 👏👏
I did page transition way differently with the page load interaction on every page.
Hahaha, I’ve done many that way in the past. It definitely eats up some time
Hey Rick, thank you for the great Tutorial. There is actually a huge problem with the delayed page loading: It affects the Page loading time for google, which can drastically impact on your google speed rating....so I would recommend to only use the exit duration timer and set the intro duration timer to 0.
I love you Tim Ricks you have transformed my Webflow experience!!!
#1 webflow youtuber!!
Not sure if it is an issue with a recent Webflow update, but this no longer seems to be working. Double-checked by cloning and publishing the tutorial site, and on initial load, the loading screen does not animate out. Seeing the same issue on my own site.
I have the same problem-happened right after the recent Webflow update hit. The part where the transition animation deactivates when the browser window gets resized still works, but the .click function on the .transition-trigger no longer happens.
Would be great if someone had a fix for this.
Following the thread. Hopefully T.Ricks comes to the rescue
Edit: my client tells me that Mac users aren't experiencing the issue. Don't know if this could help someone with diagnosing this.
Hi, I just updated the cloneable and code to fix this. timothyricks.notion.site/2021-Page-Transitions-ef50ee23f447453b88b6844c0b3ae654
@@timothyricks Amazing - thanks Timothy!!
@@timothyricks Works like a charm. You're the best, Timothy! Thank you very much.
Could you provide a link to the Lottie file? Thank you so much for taking the time to share your knowledge!
Also here's how you can remove the browser scroll bar. So when the page appears back. the content doesnt abruptly get pushed to the left.
put this in the head section of your project dashboard-
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
Ooof... This was really bugging me. Thanks a lot for providing a solution!!
(I also read two options further down, but wouldn't know how to implement them)
Update: I added you're code bellow Timothy's code in the footer. I noticed that half of the time the Lottie would flicker. After removing your code the animation was smooth again.
To again try and tackle scrollbar issue, I played with Timothy's instructions below. What worked was removing ".no-scroll-transition {overflow: hidden; position: relative;}" from the header code. Cheers! :D
Super cool and foremost, real content, real solutions! Thanks Tim!
Hey man-amazing work! You should do a video on naming/organization best practices in webflow. I feel like my pages get disorganized, but I'm not sure how to fix it.
Love the idea of creating one global symbol to house your nav, html embeds and transition div! 🙌🙌
😍 Love your tutorials! It's like a new episode on my favorite Netflix series. Thanks!
This is an awesome solution and awesome tutorial!
Works like a charm, exception is that it doesnt work on the home page exclusively for some reason. No "no-trnsition" class applied...
Thank you, Timothy! I removed my page transitions before simply because of that flicker. SOLVED!
Amazing man, love your work, videos and your contribution to design/dev community! Keep up the great work and keep us inspired!
Thank you so much for the kind words, man! Will do!
Thank you so much! I built a site for my friend and the page always flick before showing the preloader really frustrated me because I didn't know how to fix it, thanks for making this tutorial to address this problem!
Hey Thimothy, thank you so much for the cool video! A question, does this transition method also work when the animation is not in a loop? For example as PAGE OUT animation the "wave" like in your video and as PAGE ENTRY animation just a normal fade out of the transition div. I just tried that but it seems probably not
legendary. thank you again for taking the time to put these videos together.
Thank you very much Timothy for this very useful tutorial! I have a question I am using Lenis for smooth scrolling and when this loader appears there is a small jerk and scroll bar is shown and again hidden, any tips?
Same problem for me, any solutions here?
Excellent tutorial and works great, thanks for sharing Timothy!
Happy to found you in my starting point.....
Thank you, Timothy. Just waiting for your new video and great content and transition.
Thanks so much!
Great video. Trying to learn by following your video. Just one quick question, where can i find the wave Lottie file? Thanks!
Thank you Timothy :)! I've had this issue and this fix makes my day :D!
So glad to hear that!
Thank you so much for the tutorial and the code. I managed to get it work with my own animation but unfortunately ended up removing the code.
It caused a weird bug with my links pointing to "home" (href="/") : using the script provided when clicking the home link, It would actually stay (or reload?) the same page.
I also had problems with the no-transition class which did not stop the transition from happening for links pointing to a section inside the same page.
Maybe someone else had similar issue and know how it could be fixed.
Anyhow, I really liked the solution and the workflow. Thanks again.
im having problems as well. any fix?
hey, i'd like to use this specific lottie, how can i change color?
I'm using this on a client's site, but noticed that the scroll bar turns on and off when the transition div is displayed/hidden, which makes the page content noticeably shift left and right at the beginning and end of the transition. Any way to avoid this?
Thank you very much Timothy for this very useful tutorial! Webflow is such a great tool for graphic designers like us and I'm grateful to have tutorials like yours available and with such quality. Keep it up!
This was super helpful!!! Thanks man!!!
Awesome tutorial, thanks for this great content bro.
I've watched this so many times, it's so helpful! I've got it working but for some reason on 2 of my like 20 pages it just gets "stuck" in the down position. Any ideas? I do have some other finsweet js on a few of the pages but I've really tried to clean things up and I'm not sure why it is doing it on certain pages and not on others. I also checked into things like page wrappers hidden vs overflow etc with no luck. -PS Timothy my kids giggle a little when they hear your intro (like a here goes mom trying to figure something out again so she listens to this guys Webflow videos!) I love your channel!
I still get a flicker, is there any way to sort it?
Wish I could follow along. Every single tutorial of yours is a masterpiece yet takes lots of things for granted, making it impossible to be understood by non pros. Sorry just my really personal experience I have had so far with all of your guides. Now the question, will you sir, ever start a proper class on Awwwards, or Udemy or whatever platform you prefer? I would be very interested and open for paying as much as required.
Totally agree :(
Hey Timothy, thanks so much for sharing this low code solution. This seems to work perfectly.. except that now ctrl + left click to open in new tab does not work anymore. Somehow middle mouse button click to open in new tab still works though. But I feel more users use ctrl click to open in new tab and affecting this functionality might not be the best for ux.
Hey Timothy, I absolutely LOVE your tutorials! I would really like to use this page transition, but when using the F'inSweet CMS library your code stops working... Do you have any idea why and how to fix it?
Love your videos man! Do you have the Lottie file for the page transition?
On your navigator you have a 'transition-color' div, what is inside that when you expand it? I can't get the layout to work and it feels like it's going to be something silly that I'm missing... Thanks
Hey did you fix it? Iam also interested in this.
Tim, your videos are fantastic. Where do you get your lottie files?
Timothy, thank you!
Great vid my man
Thank you!
This is great, Tim!
Thank you, Kevin!
Can you make these changes to your webflow public project? I would love to know more about the nested content and styles of .transition-bg
I still have the flicker :/ Doesn't seem to go away
Thank you so much, man!!
Love the simplicity of your tutorials Timothy!
I am having an issue though, after it is done loading, my scrollbar pops into view (as the page loads and is longer than the viewport) and makes the load a little janky, how did you get around this on your example site?
Thanks!
I would like to know that too. @Timothy Ricks could you tell us a solution? Thanks in advance.
For anyone who has this problem, I found the solution. You need to remove this line from the CSS that goes in the header:
.no-scroll-transition {overflow: hidden; position: relative;}
This way the scroll bar won't disappear.
@@petigubi I had a similar problem and this fixed it. thank you!
You are a genius
Hey Timothy! This is absolutely amazing! Seriously can't express how much this has helped me. I'm having one problem though. Do you have any idea why this code does not properly work with Finsweet's CMS? It seems to not properly load or execute the loading interactions if a page has finsweet's CMS library code in it.
Thank you, Timothy!
Can we change color of the lottie?
did you figure out the solution?
Hey I used this tutorial to build my web page loading and transition. I noticed that it breaks if I want to give another custom animation to another anchor link or button. I'm trying to work around the code to sort it out. Thank you so much!
Soooooo good! Thank you for sharing!
I’m glad it’s helpful!
Hey Tim, still seeing that flick on page in. Any ideas why?
Found the fix, placing the transition right after the body so it's the first element on the page.
Hey Timothy!
Is there any way to make it load in smoothly when first loading the website? as when you load the page it starts half way through the animation .. thanks man!
This also happens to me. Did you find a solution?
I was just making my portfolio site looking to make a page transition and then this happened : )
Wow! Great timing! :)
how did you make the pricing buttons for mack and pouya
Very cool indeed, however it is impossible to practice it without a current hosting plan, that means that you either have to learn to do it on a real project paid by a client, or put your own hosting money into a learning project. If only they made custom code more accessible in Webflow.
Hey Timothy! God bless you my friend :)
It's not working on CMS links to the current page. Any thoughts?
Anyone found a solution for the content showing before the transition finished sliding out?
Hi Timothy. This is another "element" for my webflow tool library. I will use it definitely.
Another question. In your last live video "Building a Micro Site in Webflow" you showed us this great little dropdown. In almost all client project I try to find a way to implement something like this - but not getting there. Now you show me the solution! Is this guy clonable? I'm happy to invest some time in writing the code watching your tutorial but if the code is at hand somewhere this would be great. Thanks for letting me know.
Best, Patrick
This is fantastic - thank you!!! One thing I'm struggling with is how to call different transitions (example: one page transition is orange, the other one is blue, etc.) - will your code accommodate that?
The transition is the same for all pages. My first guess is that you could embed custom code for each page to change the colour of the background, for example.
You could probably create various trigger interactions, then set up the trigger interactions to fire differently for each page. Code may have to be changed or updated to reflect class names.
@@Adam-xy9fr thanks for the response! Ya that's where I landed as well - I'm not much of a custom coder so I've hit a bit of a wall on it.
Tim, how to solve the problem with screen rotation on mobile devices? When you turn the screen on a tablet or smartphone, an error occurs that only disappears when we reload the page. It is the problem that as i can see your project alsob have. I will be grateful for your response :)
I need to learn JS man
Has anyone experienced flickering on Chrome and Edge? I've done everything right, but only on Safari is it flicker free. Not sure how to fix it.
same the flickering only isnt visable when display is on block, which has the downsite that clients cant edit it..
Thank you very much for the great tutorials! But for some reason I still have the page flickering when the new page loads...
I am not using any initial states. The transition is set to display:none. All classes are good, but still ;(
it doesn't work properly with the Safari browser
I give you a like before start watching the video ;)
haha me too!
I’m subscribing because 1. Elevation Worship Website Designer. 2. Church media needs to be dope. 3. Easy to follow tutorial.
The Animmation works perfectly but my site shifts to the left when the scrollbar appears - can i fix this somehow?
The simplest fix would be to remove the .no-scroll-transition class from the css, but then the page would be able to scroll always. Another possible solution might be to add code like this to the css to try to account for the width of Window’s scrollbar.
.section {padding-left: calc(100vw - 100%);}
@@timothyricks Thank you! :3
One way is to add body {width: 100%;} then replace the .no-scroll-transition class to {overflow-y: scroll; position: fixed;}. This way we keep the scrollbar but without scrolling
@@teddy8915 will try that aswell! :))
Another great tutorial Timothy! I've got this working on all pages except my home page. If you visit the site URL directly, the transition stays visible on top of the site content and does not transition out? I guess it's to do with coming from an external source. Any ideas how to fix it?
@timothy I have found there to be a conflicting error with some Finsweet JS that is being used on the home page. I have not found a workaround for this yet...
@@davidjemison6986 did you find a fix?
@@davidjemison6986 Same problem here... already found a solution?
thx ☺
This is awesome!
It is almost perfect for my case.
I have a one-pager site, with dynamic pages for my work. So the nav bar is basically for the sections in the homepage, but I still have it in the works pages so people can move fast to any specific section in the homepage. And that's the problem, this works from the homepage to the works, but not the other way around. :(
Anyone know a good place to find lottie files?
Hi Tim. Thanks for the tutorial, it's brilliant and just what I was looking for. However, I've created a slightly altered version for my own portfolio website (I've just removed the Lottie element) but it isn't quite working correctly. When the animation comes down from the top on click it instantly appears halfway down the screen. I've checked all of my settings and they seem to be right, I just can't figure out why this is happening. Any advice would be massively appreciated. Thanks
Not sure if you solved this or not, but I was running into the same issue. Double check that in the 'Move Transition In' animation, the Move Transition for the Transition Div is set to a Y value of 0% not 0px - that worked for me.
Amazing!
Thos causes very weird glitches on my website.. :D
I am in love with that. Works perfectly. One little thing: when you resize the window size on desktop and scale down to tablet, or smaller breakpoints the transition screen appears and stays static, taking full screen. You need to reload the page to make the animation work. Anyone got an idea to solve it?
Thanks so much! I fixed that issue shortly after releasing the video. The code in the description is updated with the fix.
@@timothyricks Thank you!
Well this is great but you totally skip over the design part and how to add the lottie file, etc.
Bro you're a wizzard!
You may want to raise the volume of your voice in whatever editor you use. It’s pretty faint compared to other content
Thanks so much!
Link not loading..
Noob tip: change the play speed to 0.75 !
yea that's insane
I mean i know you want to upload quality content and all and we can learn from you but it's too fast, you never explain why things are done the way they are, never remind of anything. just the final goal of something. we know how you did stuff just some of us don't know their purpose