Hey Sister This Is the Problem Faced When i save the code could help me' Snippet automatically deactivated due to an error on line 2: Syntax error, unexpected token "
Hello Andrea, how are you? I have a question. Is the PreLoader just an animation that runs and is displayed on the screen while the content (images, text, etc.) is loading so that when the animation ends, everything is already loaded? Can I do this for free, or do I need to pay for GSAP? Thanks. I look forward to your response. Best regards,
Hello, have you found the problem with the preloader? with that of gsap dot grows? Because I tried on my site and indeed, both sets do not work. Thanks in advance if you have the solution! :)
in my Elemental Pro, I have a problem inserting custom code I install code Snippets plugin and the code is really working perfectly I want to get a preloader homepage so how do I do that .......... my elemental is not working so anyone can please tell me how I do this ??
@@andreaegli i added more effects in your videos, and it have started conflicting with each other, results in a black screen, i reduced some unnecessary gsap code and added, and now its working
Hi Andrea , Big Fan of your content ,keep up the good work, this code does not work on mobile or tab as it gives a wierd output. i'm not very good with codes, do you have a responsive version of the code.
Hey! Where did you add the code? If in Elementor custom code, then look on the right hand side, you will see the publish box, in that box you will find the conditions. Set it to home page.
But if I go to other pages of the website and then return to the home, it restarts. Is there a condition that allows me to see it only once when I open the site?@@andreaegli
@@andreaegli But if I go to other pages of the website and then return to the home, it restarts. Is there a condition that allows me to see it only once when I open the site? thank you
@@andreaegli The code you have given is not working properly in some themes just like astra theme When I am changing the color of the Tilte nothing is changing
Do you also have the problem that you can scroll the homepage, while the preloader is executed? I couldn't find a solution. Usually overflow: hidden should solve the issue. But it seems that Lenis Smooth Scroll is kind of intervening to the preloader. Do you have any suggestions?
I love every single video of yours! I have a question, from the dennis snellenberg portfolio , the Sequential Text preloader, is it text reveal? Thank you!!!!
Thank you so much! I'm not sure what that is but his preloader seems to be built with GSAP. Most likely each text has a minimal delay. I don't think it would be difficult to achieve..
hey, can you try to create the following effects which are on the cuberto website? 1. That magnetic effect upon hovering the menu in the top right corner with cursor change. 2. When we hover on the carousel cursor changes to drag and we should able to drag it Please make an exact or similar effect to it. 3. Button hover effect. I found the exact channel that was looking for your work is awesome. Thank you
Hello Andrea! Comment about cursor video I appreciate your excellent tutorials, as always. Please keep up the great work! I have a question: How can I add classes so that when I hover over a video, it displays "play," and when I hover over a contact element, it shows "let's talk"? Thank you!
I'd love to know if there's a way to do this but instead with a gif of an animated logo where the text is! Even better, I think it'd be so cool to see a pre-loader of a logo in the center of the screen with a video background, and then at the end of the load screen have the logo shrink and transition to where it sits in the nav bar.
Hey! Andrea, first of all I really love you're contents they are very impressive. I really don't know the issue but I can't change the text color. It's blue but it should be white as the code.
To change the animation, you can modify the properties of each tween. Here are some ways you can customize the animation: Duration: Adjust the duration property to change how long each animation takes to complete. Delay: Modify the delay property to add a delay before each animation starts. Easing: Experiment with different easing functions (ease) to change the acceleration and deceleration of the animation. Properties: Change the properties being animated (e.g., opacity, scale, rotation) to create different visual effects. Stagger: Adjust the stagger property to animate elements with a staggered delay, creating a sequential effect. Seems a bit complicated but it is not, you just need to play around with properties. You can check out the easing docs for GSAP here: gsap.com/docs/v3/Eases/
its my first time i saw your video and guess what my heart push me hardly to subscribe your channel trust me this kind of video very very helpfull for a designer who use cms (drag and drop) page builder to design website.thanks a lot dear💞💕
hey, can you also tell me how to animate the logo in this code, if possible please integrate Lottie's animations that would be awesome because there will not be any limitations we will be able to animate all together
Hehe, fingers crossed for that to happen sooner rather than later but channels in this niche hardly ever grow that much but who knows, anything is possible 😎
Do you use preloaders on websites? If so, I hope you found this useful
I tried the same dot scaling as background with the elementors native motion effects! It works but seems a bit glitchy!
could u tell me how did u make that red circle scrolling effect when u scroll circle goes big
Stay tuned for that, video is coming on Friday @@nuamanafzal8530
much appreciated
waiting for the video
Hey Sister This Is the Problem Faced When i save the code could help me'
Snippet automatically deactivated due to an error on line 2:
Syntax error, unexpected token "
Make sure you add all the code, it seems like you forgot to copy/close something
Hello Andrea, how are you?
I have a question.
Is the PreLoader just an animation that runs and is displayed on the screen while the content (images, text, etc.) is loading so that when the animation ends, everything is already loaded?
Can I do this for free, or do I need to pay for GSAP?
Thanks. I look forward to your response.
Best regards,
I replied to your email 😉
Hi Andrea !
Many thanks for your answer 🤩
I really appreciate it !
Have a great Sunday
amazing content, but how to make it responsive?
Thank you! You need to add CSS media queries
Hello, have you found the problem with the preloader? with that of gsap dot grows? Because I tried on my site and indeed, both sets do not work. Thanks in advance if you have the solution! :)
Not yet, haven't had the time to look into it but i will at some point
in my Elemental Pro, I have a problem inserting custom code I install code Snippets plugin and the code is really working perfectly I want to get a preloader homepage so how do I do that .......... my elemental is not working so anyone can please tell me how I do this ??
Did you follow the steps in the video? If you did, it should work just fine
Thanks for the effort, not working for me, when i apply the code its just blank black site
Have another look, there must be something you missed, it’s working 😉
@@andreaegli i added more effects in your videos, and it have started conflicting with each other, results in a black screen, i reduced some unnecessary gsap code and added, and now its working
@@Graphicayya ahh, that explains it ;) happy you made made it work!!!!
Hi Andrea ,
Big Fan of your content ,keep up the good work,
this code does not work on mobile or tab as it gives a wierd output.
i'm not very good with codes, do you have a responsive version of the code.
Andrea, is it also possible to put an image or svg instead of a piece of text? How can I put that?
Make a video on adding custom preloader with own logo animation
Hello Andrea, how do I set the preloader to be active only on the opening of the website? I tried looking in the "add condition" but couldn't find it.
Hey! Where did you add the code? If in Elementor custom code, then look on the right hand side, you will see the publish box, in that box you will find the conditions. Set it to home page.
But if I go to other pages of the website and then return to the home, it restarts. Is there a condition that allows me to see it only once when I open the site?@@andreaegli
@@andreaegli But if I go to other pages of the website and then return to the home, it restarts. Is there a condition that allows me to see it only once when I open the site? thank you
@@tommasosposito1517 nope, there isn't. it needs additional custom code
70kb only for preloader... Are you serious?
It is what it is
Your Code is good but there is a problem in it which I am facing that I am not able to change the color of its title preloader
I’m afraid I don’t understand what you mean
@@andreaegli The code you have given is not working properly in some themes just like astra theme When I am changing the color of the Tilte nothing is changing
@@andreaegli And when I am using Hello Elementor theme this code is working perfectly. Preloader TITLE
@@andreaegli Thank You Ma'am
Do you also have the problem that you can scroll the homepage, while the preloader is executed? I couldn't find a solution. Usually overflow: hidden should solve the issue. But it seems that Lenis Smooth Scroll is kind of intervening to the preloader. Do you have any suggestions?
Yes, noticed this while working on a project. Here's the adjusted code, I've merged Lenis & GSAP together:
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #0c0a0b;
overflow: hidden;
z-index: 100;
}
.text-container {
display: flex;
flex-direction: row;
gap: 1em;
overflow: hidden;
color: white;
opacity: 0;
}
.big-text {
font-family: 'Playfair Display', sans-serif;
font-size: 5rem;
}
.italic-text {
font-style: italic;
}
.no-scroll {
overflow: hidden;
}
texttext
// Flag to indicate preloader status
let isPreloaderActive = true;
// Initialize Lenis
const lenis = new Lenis({
// ... your existing Lenis configuration ...
});
// Update the requestAnimationFrame function for Lenis
function raf(time) {
if (!isPreloaderActive) {
lenis.raf(time);
}
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// GSAP Preloader Animation
document.body.classList.add('no-scroll');
const tl = gsap.timeline();
tl.to(".preloader .text-container", {
duration: 0,
opacity: 1,
ease: "Power3.easeOut"
})
.from(".preloader .text-container h2", {
duration: 1.5,
delay: 0.2,
y: 200,
stagger: 0.4,
ease: "Power3.easeOut"
})
.to(".preloader .text-container h2", {
duration: 1.2,
y: 200,
stagger: 0.2,
ease: "Power3.easeOut"
})
.to(".preloader", {
duration: 1,
height: "0vh",
ease: "Power3.easeOut"
})
.to(".preloader", {
display: "none"
})
.eventCallback("onComplete", function() {
// Remove 'no-scroll' class from body when preloader ends
document.body.classList.remove('no-scroll');
isPreloaderActive = false; // Disable preloader flag
});
Hope this helps!
I love every single video of yours!
I have a question, from the dennis snellenberg portfolio , the Sequential Text preloader, is it text reveal?
Thank you!!!!
Thank you so much! I'm not sure what that is but his preloader seems to be built with GSAP. Most likely each text has a minimal delay. I don't think it would be difficult to achieve..
hey, can you try to create the following effects which are on the cuberto website?
1. That magnetic effect upon hovering the menu in the top right corner with cursor change.
2. When we hover on the carousel cursor changes to drag and we should able to drag it Please make an exact or similar effect to it.
3. Button hover effect.
I found the exact channel that was looking for your work is awesome. Thank you
I’ve seen your previous comment and yes, added the request to my list but it will take some time
Hello Andrea!
Comment about cursor video
I appreciate your excellent tutorials, as always. Please keep up the great work! I have a question: How can I add classes so that when I hover over a video, it displays "play," and when I hover over a contact element, it shows "let's talk"?
Thank you!
Hey! I need to test this but can you send me an email, I can't keep track of requests like this...thx!
I'd love to know if there's a way to do this but instead with a gif of an animated logo where the text is! Even better, I think it'd be so cool to see a pre-loader of a logo in the center of the screen with a video background, and then at the end of the load screen have the logo shrink and transition to where it sits in the nav bar.
/* Base styles for all devices */
.preloader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
.logo {
width: 200px; /* Adjust width as needed */
height: auto; /* Maintain aspect ratio */
}
#video-background {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
/* Hide preloader when content is loaded */
.preloader.hide {
display: none;
}
Had you find a solution for the problem? Thanks for sharing all these great content
Not yet, didn't have much time to look into it, I'm afraid...
Hey! Andrea, first of all I really love you're contents they are very impressive. I really don't know the issue but I can't change the text color. It's blue but it should be white as the code.
cool tuts! just a question - which theme do you prefer using?
Thank you 😊 I only use Hello
When I add multiple GSAP code it's not working; like we are loading page wise
If I want to add or change the animation, where would it be?
To change the animation, you can modify the properties of each tween. Here are some ways you can customize the animation:
Duration: Adjust the duration property to change how long each animation takes to complete.
Delay: Modify the delay property to add a delay before each animation starts.
Easing: Experiment with different easing functions (ease) to change the acceleration and deceleration of the animation.
Properties: Change the properties being animated (e.g., opacity, scale, rotation) to create different visual effects.
Stagger: Adjust the stagger property to animate elements with a staggered delay, creating a sequential effect.
Seems a bit complicated but it is not, you just need to play around with properties. You can check out the easing docs for GSAP here: gsap.com/docs/v3/Eases/
hello andrea, thank you for another amazing tutorial. Do you maybe know how to show this preloader only once on website visit? Is that possible?
hi Andrea! this is such a cool video. I do have some questions. how do I edit the code so that the preloader only appears once?
you can do that under "Edit Conditions"
Thank you so much! You can set the condition to singular > front page and it will only show on the home page
can we use image or lottie animation instead of text?
Yup, you just need to adjust the code accordingly
Your content is amazing, keep it up!🤓
Thank you!!!
its my first time i saw your video and guess what my heart push me hardly to subscribe your channel trust me this kind of video very very helpfull for a designer who use cms (drag and drop) page builder to design website.thanks a lot dear💞💕
hey, can you also tell me how to animate the logo in this code, if possible please integrate Lottie's animations that would be awesome because there will not be any limitations we will be able to animate all together
For that, you would need to change the code extensively.
@@andreaegli can you make part for it specifically for lottie animation
Ты очень красивая и умная, мне нравятся твои видео, продолжай в том же духе!!!
Hi @Andrea
Do you have any idea about remembering the last active tab on page reload?
This channel will have 1M subscribers someday, mark my word!
Hehe, fingers crossed for that to happen sooner rather than later but channels in this niche hardly ever grow that much but who knows, anything is possible 😎
@@andreaegli The reason is limited visitors... Not everyone likes to spend time watching website building.
Cool tutorial!!! Thanks for share
Thanks for watching!
Love your tutorials! keep up the great work cause they help alot :)
Thank you so much, Nicolas! ☺️ will do!
keep doing, u r doing great job
waitng for more videos on gsap
Will do!
@@andreaegli ❤
Nice one
Thanks 🔥
Thank u for sharing🙏🌹
Welcome 🙏
Wow !
😎
Bravo! 👌👍👏👏👏🥰
🤗
yes!
Skill next level❤❤
Hehe, thanks 😊