Perfect Page Transitions in Webflow (2021)

Hey Tim, still seeing that flick on page in. Any ideas why?

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?

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?

This is an awesome solution and awesome tutorial!

Thanks for this Rick, love the affect. The lottie was easy to find by searching transition web page on Lottiefiles. Had some finicky stuff with the landing page having a anchor link on the home page. Ended up fixing it by adding a separate link property to the home page nav to use section vs url+#. Hope this helps someone

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.

I love you Tim Ricks you have transformed my Webflow experience!!!

Great vid my man

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!

Thos causes very weird glitches on my website.. :D

Hey Timothy! God bless you my friend :)

this is awesome but you really need to slow down. I keep looking back and can't quite tell if you're adding the interactions to the transition-trigger or is is something else? I'm gonna try it with the tigger but you should just slow down a bit so it's easier to follow. Like not a lot just be a bit more clear with the steps. Awesome job though! Where did you find that lotti file? I've been searching for one like that with 0 luck

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

Thank you so much, man!!

thx ☺

I still get a flicker, is there any way to sort 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 ;(

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 :)

So it doesn't work on hamburger menus? What do you mean by 'empty links'? Do you mean links with no text? Can I just add text in to the link block and then hide the text?

Timothy, thank you!

Excellent tutorial and works great, thanks for sharing Timothy!

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!

Anyone found a solution for the content showing before the transition finished sliding out?

This man be thuggin!

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. :(

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.

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

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.

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!

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!

I’m subscribing because 1. Elevation Worship Website Designer. 2. Church media needs to be dope. 3. Easy to follow tutorial.

Noob tip: change the play speed to 0.75 !

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-

<style>
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
</style>

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 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?

Tim, your videos are fantastic. Where do you get your lottie files?

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 love the idea but unfortunately it doesn't work with F'in sweet's scripts.

Link not loading..

Bro you're a wizzard!

You are a genius

I've said this before, but it bears repeating: Dude, you're the best. This is phenomenal.

This was super helpful!!! 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 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

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?

It's not working on CMS links to the current page. Any thoughts?

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!

Love your videos man! Do you have the Lottie file for the page transition?

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.