Thanks a lot Andrea ! for Those who don't have elementor pro, here is a tips : use the block html and paste the code (the cons is that you'll have to put display none if you work on the page)
Thanks for another fantastic video 😉 Never stop bringing content based on animations mainly using GSAP. It is indeed unique content here on UA-cam. Very very different. You're a machine. I would really like to know how you have learned to incorporate GSAP code and animations into your websites. Where do you learn? Do you feel that one day you will be able to pass on this knowledge and teach other people too? A kind of courses or training? Keep up the excellent work you've been doing, because in fact for me you're the best... by far!
You are very welcome, Pedro!!! I have to admit tho, that these videos take so much time to make: from concept to testing to implementation, filming editing...woof! I'll keep making them because they are a good bank of snippets for me too and it's fun. I sometimes have to go back and watch my own videos:)))) I know how to code a bit and I like to push things to the brink. I started doing this because I was so sick of seeing boring shit made with WP & El and Webflow taking all the praises. Yeah, it's true, it's harder to implement coding stuff, especially complex animations in Elementor because of how nested their code is but I see it as a challenge. I would love to teach other people but I don't know what exactly. Basic coding? You need to know a bit of coding to be able to work with GSAP. Let me know what you would like to see in the course or training and I'm going to seriously consider it because you're not the first one asking for this ;) You can email me if want, it helps me to keep on top of requests. Thank you again for the lovely words, it helps when you feel burned out :))
Something with a logo and then it slide out to the top. Also another video idea: moving gradient backgrounds for the landing page. That would be awesome if you could figure that out. Thanks!@@andreaegli
Hello andrea, amazing content Thanks A lot... My question is if it is possible to make the preloader perform only for the home page (first visit) then disappear?
Hey! thank you so much! You can do it by setting the condition to singular > front page but the caveat with this is that every time you visit the home page, the preloader will be activated. I need to figure out a way to only have it work once, when you land on the homepage but it needs some custom code of course and I haven't had the time to test it out properly yet
Great content Andrea, thanks for doing this! One question, do you know a way my intro animations from my page start once the loader completely dissapears?
@@pburmester The loading screen takes 7.5 seconds to load so you'd have to time your hero section animation to be a 8s or so. Play around with the value to find the best timing
Hey andrea 👋🏻 just love your gsap videos and have been following you since a long time, i wanted to apply this preloader to my client's website and i am having some difficulties in making this mobile responsive can i do it with the css media queries?, (since it's sunday my team is on a holiday😅).
I switched from OBS to screen studio just because it has all the zoom ins and I don't have to add those in, just tweak them where needed. They're added automatically as you click on the screen.
Hi Andrea, thanks for the amazing work. Unfortunately, i have no elementor pro. But can i implement the code as html block on my front page ? because, if i put it into the header, it loads on any page. i just want to load the preloader on the mainpage. Thanks and best regards
Another amazing tutorial. Thanks alot for your time. I would like to ask - My wordpress is set for Hebrew language and not English. and i assume that for that reason the Counter numbers and % are all opposite. (f.e %800, instead of 008%) i have tried with the gpt to sort it but it doesnt seems to work for me. If you can help me with that issue it will much appriciated. thanks alot again.
theres an easy fix - in the code - under the counter section, under display: flex; add another line and type in - flex-direction: row-reverse; that should def solve that for you
Yes. The loading screen takes 7.5 seconds to load so you'd have to time your hero section animation to be 8s or so depending on your animations. Play around with the value to find the best timing
One more request i didn't found any plugin addon of elementor that can animate borders. Not with keyframes. Basically what I'm looking for is that when the page loads so the column and section borders should draw animate. Like this page loads - After page is loaded borders should draw in straight line. -------------- Or horizontal depending on the border itself wether it is from top to bottom or left to right.
Hey Andrea! Love the tutorial, I followed it exactly and got it up and running in no time. My one problem is, I am using it in concert with your, "Text Reveal Animation on Scroll GSAP" tutorials, and because the Preloader still allows the scrollbar to be visible/working (during its animations) it allows users to 'pre-trigger' scroll animations without being able to actually see them, by scrolling during the Preloader, and it also 'pre-triggers' any entrance animations even though they aren't yet visible. This makes my hero animations not visible as they trigger during the Preloader. Is there any easy fix for this?
Awesome! Ok, I see the issue. I will look into it, the solution is simple in theory but not so much in practice as there are a few moving parts to consider. can you send me an email with your comment so i can let you know when the solution has been found?
You need to set the conditions in the custom code. You can set it so that it shows on the home page only. Every time you visit the home page it will show. Unfortunately that can’t be changed but at least it doesn’t appear on other pages
Hi andrea! could you tell me how i can remove the circle thing that has a circle inside and rotates? how can i remove that and only keep the line and counter? i don't see it in your video but i copied your exact code so i dont understand where the circle came from
just tried on my other website and the circle does not appear anymore, i think there might be a plugin or something that is conflicting with this gsap code maybe
Thanks a lot Andrea ! for Those who don't have elementor pro, here is a tips : use the block html and paste the code (the cons is that you'll have to put display none if you work on the page)
...or use the code snippet plugin ;)
Awesome content, it looks amazing. thankyou for sharing...!!! ❤ we want more content like this.
Thanks for your efforts. This channel really deserves more subscribers!
amazing i love your gsap vanilla videos
Cool style, this looks amazing on agency website or story telling landing pages
Yup, that’s exactly how a preloaded like this should be used! I will probably implement it on my own website (still working on that one 😅)
Thanks for another fantastic video 😉 Never stop bringing content based on animations mainly using GSAP. It is indeed unique content here on UA-cam. Very very different. You're a machine. I would really like to know how you have learned to incorporate GSAP code and animations into your websites. Where do you learn? Do you feel that one day you will be able to pass on this knowledge and teach other people too? A kind of courses or training?
Keep up the excellent work you've been doing, because in fact for me you're the best... by far!
You are very welcome, Pedro!!! I have to admit tho, that these videos take so much time to make: from concept to testing to implementation, filming editing...woof! I'll keep making them because they are a good bank of snippets for me too and it's fun. I sometimes have to go back and watch my own videos:)))) I know how to code a bit and I like to push things to the brink. I started doing this because I was so sick of seeing boring shit made with WP & El and Webflow taking all the praises. Yeah, it's true, it's harder to implement coding stuff, especially complex animations in Elementor because of how nested their code is but I see it as a challenge. I would love to teach other people but I don't know what exactly. Basic coding? You need to know a bit of coding to be able to work with GSAP. Let me know what you would like to see in the course or training and I'm going to seriously consider it because you're not the first one asking for this ;) You can email me if want, it helps me to keep on top of requests.
Thank you again for the lovely words, it helps when you feel burned out :))
awesome! I would love to see more variations of GSAP preloaders
More coming soon! What did you have in mind?
Something with a logo and then it slide out to the top. Also another video idea: moving gradient backgrounds for the landing page. That would be awesome if you could figure that out. Thanks!@@andreaegli
@@andreaegli another idea is magnetic buttons! Would love to learn those :)
Thank you!
cool things. 😉😉. I always like that you share these cool things! Thank you.
Thank you so much 😊
I love it thanks for sharing again!
Happy to hear that & you’re very welcome 😉
Great preloader thank ❤
Thanks 😊 you are very welcome
Hey Andre, keep up the GSAP tutorials and well done so far. Would love to see some barba.js or a combination of Gsap and Barba.ja
Will do! As for barba.js, I will see what I can do
Hello andrea, amazing content Thanks A lot... My question is if it is possible to make the preloader perform only for the home page (first visit) then disappear?
Hey! thank you so much! You can do it by setting the condition to singular > front page but the caveat with this is that every time you visit the home page, the preloader will be activated. I need to figure out a way to only have it work once, when you land on the homepage but it needs some custom code of course and I haven't had the time to test it out properly yet
@@andreaegli ı got what you mean, will keep waiting 👀👀
Thank you again for sharing your knowledge with us "Queen of GSAP".
How do I adjust for mobile devices?
You’re very welcome 😅 the only thing you need to adjust for mobile is the counter which can be done with CSS media queries
Great content Andrea, thanks for doing this! One question, do you know a way my intro animations from my page start once the loader completely dissapears?
Thank you! Do you mean, how long to time your on-load hero section animation so it shows when the loader has stopped loading?
@@andreaegli right now on my site when the loader it's complete and dissapears, my hero it's already there :( so I can't see the intro anim
@@pburmester can I see the website?
@@pburmester The loading screen takes 7.5 seconds to load so you'd have to time your hero section animation to be a 8s or so. Play around with the value to find the best timing
Amazing💗
Thanks 😄
Nice! Thank you
Hey andrea 👋🏻 just love your gsap videos and have been following you since a long time, i wanted to apply this preloader to my client's website and i am having some difficulties in making this mobile responsive can i do it with the css media queries?, (since it's sunday my team is on a holiday😅).
Hey!! Thanks so much 🤓 yup, can be done with media queries. You could ask ChatGPT to workout a solution and see which one works best ☺️
Which screen recorder are you using? it looks so smooth
I switched from OBS to screen studio just because it has all the zoom ins and I don't have to add those in, just tweak them where needed. They're added automatically as you click on the screen.
Hi Andrea, thanks for the amazing work. Unfortunately, i have no elementor pro. But can i implement the code as html block on my front page ?
because, if i put it into the header, it loads on any page. i just want to load the preloader on the mainpage.
Thanks and best regards
Hey! you are very welcome! get a code snippet plugin ;) I use code snippets when I need to
Another amazing tutorial.
Thanks alot for your time.
I would like to ask -
My wordpress is set for Hebrew language and not English. and i assume that for that reason the Counter numbers and % are all opposite. (f.e %800, instead of 008%)
i have tried with the gpt to sort it but it doesnt seems to work for me. If you can help me with that issue it will much appriciated. thanks alot again.
theres an easy fix - in the code - under the counter section, under display: flex; add another line and type in
- flex-direction: row-reverse;
that should def solve that for you
Where do you get these preloaders? This is amazing!
Can we hold our animations because after the preloader ends and page open ups. All my animations already occur
Yes. The loading screen takes 7.5 seconds to load so you'd have to time your hero section animation to be 8s or so depending on your animations. Play around with the value to find the best timing
@@andreaegli it worked thanks 👍🙏
One more request i didn't found any plugin addon of elementor that can animate borders. Not with keyframes.
Basically what I'm looking for is that when the page loads so the column and section borders should draw animate.
Like this page loads
-
After page is loaded borders should draw in straight line.
--------------
Or horizontal depending on the border itself wether it is from top to bottom or left to right.
Hey Andrea! Love the tutorial, I followed it exactly and got it up and running in no time.
My one problem is, I am using it in concert with your, "Text Reveal Animation on Scroll GSAP" tutorials, and because the Preloader still allows the scrollbar to be visible/working (during its animations) it allows users to 'pre-trigger' scroll animations without being able to actually see them, by scrolling during the Preloader, and it also 'pre-triggers' any entrance animations even though they aren't yet visible. This makes my hero animations not visible as they trigger during the Preloader.
Is there any easy fix for this?
Awesome!
Ok, I see the issue. I will look into it, the solution is simple in theory but not so much in practice as there are a few moving parts to consider. can you send me an email with your comment so i can let you know when the solution has been found?
@@andreaegli Just sent it!
@andreaegli found the solution to this issue ? please help
Thanks, but how can I show preloader only once for session storage?
You need to set the conditions in the custom code. You can set it so that it shows on the home page only. Every time you visit the home page it will show. Unfortunately that can’t be changed but at least it doesn’t appear on other pages
waiting for framer tutorials lol
lol coming next week probably
Hi andrea! could you tell me how i can remove the circle thing that has a circle inside and rotates? how can i remove that and only keep the line and counter? i don't see it in your video but i copied your exact code so i dont understand where the circle came from
just tried on my other website and the circle does not appear anymore, i think there might be a plugin or something that is conflicting with this gsap code maybe
The circle is part of the preloaded design
how about preload to use own company logo? this is good thanks but better if we can add own company logo.
ok, I will make one of those too. Any other ideas?
Yes please, company's logo preloader would be great!
YES this would be awesome!@@andreaegli
yeah!
is this mobile friendly?
cant go to the CODE link 😥
How come? The link works