How do you manage it to appear only once when loading the page on multiple pages and not having it load when going back to the homepage or having it working as a transition? Thanks Timothy!
Got a little issue here Tim! when I am in the editor mode (as my client saw), the .loader {display: flex;} causes an issue where the .loader stays fixed on display and doesn't allow content editing on the pages. what's a solution for that?
Hi, Webflow adds a class of w-editor to the html element when in editor mode. So we can hide the loader when inside that mode. html.w-editor .loader { display: none !important; }
Great tutorial. What if we want to make it load only on first visit in a day. I did preloading animation but want it to load only once a day, please help
Super interesting way of doing this. I have one question tho; How do you set the loaderDuration to the ACTUAL time the page takes to load? Or is this something that is not necessary when using this approach? Thanks in advance!
Hi @@jordanheuten2040, you could look into a library like Pace.js to track actual load time. codebyzach.github.io/pace/ Most experiences only show this loading screen on the first page the user visits. But to create a transition, you could fade in the color of the loading screen before sending the user to the next page, faking a transition similar to this tutorial. ruclips.net/video/XuYO4hY0HhU/видео.html To actually have that loading screen fade over both pages, you'd need to use a library like Barba.js ruclips.net/video/n21ud1pOWKo/видео.html
This is awesome! I'm actually trying this one today for my new project. Just one question, how does that link to the sandbox file works? Do I have to create an account and it works automatically or does it has to with Webflow? I find that a little too difficult to grasp, tho I really want ot get work of it.
Actually, don't worry I just saw that you have a tutorial about it in your Patreon, I will subscribe to it right away and find all these answers. Thanks for the big help
It works but when resizing the viewport to a different breakpoint will show the page loader. I can't solve it so sadly i'll have to remove this pageloader from my site.
After a lot of testing I have figured out why it wasn't working for me. The code conflicts with any interaction in a section that are not set to trigger on all devices. For example, I had an interaction triggered on 'Scroll into view' set only to trigger on desktop. If you tick all devices the loader works perfectly.
Hey Tim, great tutorial as usual. Is code sandbox your choice for hosting custom JS for use on a webflow, or just during development? I'm using jsdelivr to serve files from github, however, it's cumbersome during development.
Hi Yash, I show the process of setting up a codesandbox file and connecting it to WebFlow in this tutorial. ruclips.net/video/fbsux6zg1d0/видео.html I also have a tutorial specifically on codesandbox at www.patreon.com/posts/51678553
Hey, I was having the same issue and discovered there was a conflict with another interaction on my site. The interaction was only set to trigger on desktop view. For some reason the loader wont work properly if there is an interaction that is not set to trigger on all devices. Test it out and see if this is the same issue for you.
There's libraries that handle that like Pace.js. codebyzach.github.io/pace/ It's not always the best UX for really fast or really slow internet connections though.
![Gunna - HIM ALL ALONG [Official Visualizer]](http://i.ytimg.com/vi/HiCxoDeo0hc/mqdefault.jpg)
Looking to break into Webflow and I'm amazed by your style as well as how easy you explain things! Thanks for the great video.
I was actually thinking about this the other day, thanks! 🔥
You are the beast, Timothy, thanks for these videos, I'm constantly learning from you and you have a great style and attention to detail!
You're legit a wizard man. Appreciate the tutorial. Keep em coming.
Just what I was looking for to add to my project! 😍 thank you!
Love it. Such a creative way of using all those tools! Thanks Tim
I love all your tutorials! You are amazing!
you are such a wizard bro!
This stunning Tim 🚀🚀 Thank you
This is next level webflow, thanks a lot!
Great tutorial
As always, you are awesome! Thank you so much for one more dope webflow trick!
Thanks for this tutorial! One question: Is it possible to add this animation just on the first loading?
How do you manage it to appear only once when loading the page on multiple pages and not having it load when going back to the homepage or having it working as a transition? Thanks Timothy!
Did you find a solution?
Incredible. I might use this ASAP
No, GSAP!
thanks!
nice one mate! Do you recommend using loaders though?
Got a little issue here Tim! when I am in the editor mode (as my client saw), the .loader {display: flex;} causes an issue where the .loader stays fixed on display and doesn't allow content editing on the pages. what's a solution for that?
Hi, Webflow adds a class of w-editor to the html element when in editor mode. So we can hide the loader when inside that mode.
html.w-editor .loader { display: none !important; }
Thank you!
Amazing video
How did you edit code on sandbox and it is updated on Webflow?
Great tutorial.
What if we want to make it load only on first visit in a day. I did preloading animation but want it to load only once a day, please help
Possible?
I'm also curious about this
will it work if i don't have any plans purchased in webflow?
I am a beginner !
Hi Tim, can i make this whit no code ? THANKS !
G.O.A.T. 🐐
Super interesting way of doing this. I have one question tho; How do you set the loaderDuration to the ACTUAL time the page takes to load? Or is this something that is not necessary when using this approach? Thanks in advance!
Also, is there a way to 'fade in' the pageloader before going to the next page?
Hi @@jordanheuten2040, you could look into a library like Pace.js to track actual load time.
codebyzach.github.io/pace/
Most experiences only show this loading screen on the first page the user visits. But to create a transition, you could fade in the color of the loading screen before sending the user to the next page, faking a transition similar to this tutorial. ruclips.net/video/XuYO4hY0HhU/видео.html
To actually have that loading screen fade over both pages, you'd need to use a library like Barba.js ruclips.net/video/n21ud1pOWKo/видео.html
This is awesome! I'm actually trying this one today for my new project.
Just one question, how does that link to the sandbox file works? Do I have to create an account and it works automatically or does it has to with Webflow? I find that a little too difficult to grasp, tho I really want ot get work of it.
Actually, don't worry I just saw that you have a tutorial about it in your Patreon, I will subscribe to it right away and find all these answers. Thanks for the big help
Thanks so much, Diego! Really glad to have you join the community!
Hi, I am little new. How can we get the sandbox cdn link for webflow?
It works but when resizing the viewport to a different breakpoint will show the page loader. I can't solve it so sadly i'll have to remove this pageloader from my site.
After a lot of testing I have figured out why it wasn't working for me. The code conflicts with any interaction in a section that are not set to trigger on all devices.
For example, I had an interaction triggered on 'Scroll into view' set only to trigger on desktop. If you tick all devices the loader works perfectly.
@@sham_n4 it’s been a while for me but I had it for all devices.
Hi. Are you going to make a tutorial on how you made jquery builder?
My dream is to make similar builder for GSAP animation and scroll trigger :)
why when I click f12 or when I turn the phone horizontally or vertically it only shows 100% and nothing else and I copied all the animations???
Hey Tim, great tutorial as usual. Is code sandbox your choice for hosting custom JS for use on a webflow, or just during development? I'm using jsdelivr to serve files from github, however, it's cumbersome during development.
Thanks so much! I just use CodeSandbox during development for its speed to update
hey tim,
can you please tell me how you have synced webflow with codesandbox
Hi Yash, I show the process of setting up a codesandbox file and connecting it to WebFlow in this tutorial. ruclips.net/video/fbsux6zg1d0/видео.html
I also have a tutorial specifically on codesandbox at www.patreon.com/posts/51678553
Thanks,
Do you then change the script to codesanbox code when the project is completed
or you just keep it that way?
security point of view
My animation restarts when I resize my browser, any idea why?
Hey, I was having the same issue and discovered there was a conflict with another interaction on my site. The interaction was only set to trigger on desktop view. For some reason the loader wont work properly if there is an interaction that is not set to trigger on all devices. Test it out and see if this is the same issue for you.
The bosssss
Cloning the page results in all functions collapsing. animations dont work.
Could we adapt it to the real loading of the browser?
There's libraries that handle that like Pace.js. codebyzach.github.io/pace/ It's not always the best UX for really fast or really slow internet connections though.