Perfect Page Transitions in Webflow (2021)
HTML-код
- Опубликовано: 20 май 2024
- Get the code for this tutorial at www.notion.so/timothyricks/20...
Get the cloneable (affiliate link)
webflow.grsm.io/page-transitions
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096 
Хобби
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!
Super cool and foremost, real content, real solutions! Thanks Tim!
That "T.RICKS" identifier is absolutely brilliant, especially considering the quality of your advice. Genius!
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.
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!
legendary. thank you again for taking the time to put these videos together.
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!
I've said this before, but it bears repeating: Dude, you're the best. This is phenomenal.
Excellent tutorial and works great, thanks for sharing Timothy!
I love you Tim Ricks you have transformed my Webflow experience!!!
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!
This is an awesome solution and awesome tutorial!
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.
Awesome tutorial, thanks for this great content bro.
This was super helpful!!! Thanks man!!!
Happy to found you in my starting point.....
Thank you, Timothy!
Thank you, Timothy! I removed my page transitions before simply because of that flicker. SOLVED!
#1 webflow youtuber!!
Could you provide a link to the Lottie file? Thank you so much for taking the time to share your knowledge!
Timothy, thank you!
Thank you so much, man!!
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
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 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?
You are a genius
Thank you Timothy :)! I've had this issue and this fix makes my day :D!
So glad to hear that!
Thank you, Timothy. Just waiting for your new video and great content and transition.
Thanks so much!
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.
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
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!
Soooooo good! Thank you for sharing!
I’m glad it’s helpful!
Great video. Trying to learn by following your video. Just one quick question, where can i find the wave Lottie file? Thanks!
Love your videos man! Do you have the Lottie file for the page transition?
Amazing!
Tim, your videos are fantastic. Where do you get your lottie files?
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.
This is great, Tim!
Thank you, Kevin!
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
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!
thx ☺
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
how did you make the pricing buttons for mack and pouya
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 ;(
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. :(
Hey Timothy! God bless you my friend :)
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?
Great vid my man
Thank you!
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.
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?
I still get a flicker, is there any way to sort 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 :)
Anyone found a solution for the content showing before the transition finished sliding out?
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?
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?
I need to learn JS man
It's not working on CMS links to the current page. Any thoughts?
I love the idea but unfortunately it doesn't work with F'in sweet's scripts.
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.
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!
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 :(
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.
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?
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.
Bro you're a wizzard!
it doesn't work properly with the Safari browser
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?
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!
I was just making my portfolio site looking to make a page transition and then this happened : )
Wow! Great timing! :)
I give you a like before start watching the video ;)
haha me too!
Thos causes very weird glitches on my website.. :D
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..
I’m subscribing because 1. Elevation Worship Website Designer. 2. Church media needs to be dope. 3. Easy to follow tutorial.
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.
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
@@teddyadarsuren8915 will try that aswell! :))
Link not loading..
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!
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