Hello Andrea and everyone. I was scratching my head because the code didnt seem to work for me. Turns out on your "custom cursor html" part that you have in the description there is no and in the start and end of the code. If you add that it works perfectly. You can also see it if you pause on 5:16 Awesome work once again!
I love your videos Andrea. Thank you so much for sharing your knowledge! would be really nice if you could teach us how to make and horizontal movement on scroll. 🙏
If you want to ensure that the text does not interfere with the hover events of the images, you can use the CSS property "pointer-events: none; "on the text element. This will make the text non-interactive, allowing the hover events to pass through to the underlying images.
Hello Andrea! Great work, you helped me a lot with it!!!! How would you solve it, that the cursor gets different color on each picture? For example on one picture magenta, on the other picture cyan?
Hello Andrea! 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!
Hello Andrea, the truth is your videos are incredible and one always learns things and appreciates your time to make them, now comes the question, can you do the same but with the containers?
Hey Matias! Thank you so much!!!! Hmm, not sure I understand, the images are in containers. I only use containers in my videos. Either way, the effect works on anything as long as you add the class on the element. Let me know if you need more help!🤓
Hi, there should be a way to click (the cursor big) and get redirected to an other page or smooth scrolling to a section. Can't get this to be linked. Is there a solution?
Thanks for this amazing tutorial but one question is what if i want to add the functionality like when user clicks on particular image the image should get enlarge. Appreciate your help
Hi Andrea! Thank you for the great content 🙂is it possible to display two different types of cursor changes? For example, cursor type one would display as per your video with "view" text to indicate a click through on a element. Then cursor type two would have an icon instead off text to indicate for example a side scroll on a different element?
I don't know if I did something wrong but it really doesn't work on my side :/ Just have to follow the tuto or should I add gsap library before on my website ?
Revisit all the steps. I've had someone else tell me the same thing only for them to have forgotten something... ex like a class in the right place. If you forget just one thing, nothing works. Without seeing your implementation I cannot help but with this advice ;)
Hi andrea! great tutorial as always keep it up like this !, one question, when writting the code in elementor especially the html part you are targeting "HTML" and "P", isnt that a little bit risky? will that change all the P i have on my websites? thanks in advance!
Hey Gaston! Nope, it will not affect your other tags on the page but if you want peace of mind, you can add an id to the p tag ex: View project #hello { margin-top: 10px; } Hope this helps 😉
Thank you for this great tutorial ! I tested it out and it works perfectly. However the cursor goes under the popups and is not visible (I gave the cursor a z-index of 999), is there a solution to that ? Thank you !
You are very welcome! So happy to hear that ;) Ok, change it to z-index:2147483647 and don't forget to add the class on the popup ;) lemme know if it worked (it worked during my test)
Hi Andrea thanks for this tutorial! I don't understand where I'm wrong but, if I put custom code in elementor dashboard nothing happens. If I add the code in the specific page adding an html widget the effect comes out... I also have another problem, it seems like part of the html code is shown in the header. Could you help me finding out what I'm doing wrong? Thank you! Bruno
Thank you very much for another great tutorial. any chance to get the exact code that you use in your video? i find it difficult to handle the missing parts. much appriciated.
@@andreaegli Thanks for replying. 1) i copied the html+css code and paste them into custom code (head). I added YOUR CSS CODE and after that i added YOUR HTML CODE. 2)I copied the JS and paste it in custom code(body end) and nothing happened. couldnt even see the basic cursor. also i named some elemets with the class name "your-class" and still havent see anything. I wonder what am i missing. thanks alot again!
@@kani7345 Ok., can you send me screenshots of your code both, CSS+HTML & JS? here: herllo @ egliandreastudios.com this is too bizare not to investigate
Hello Andrea! 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!
Hello Andrea and everyone. I was scratching my head because the code didnt seem to work for me. Turns out on your "custom cursor html" part that you have in the description there is no
and in the start and end of the code. If you add that it works perfectly. You can also see it if you pause on 5:16 Awesome work once again!
We're building a trendy feature/effect and that is a GSAP cursor change on hover! Woohoo!
I love your videos Andrea. Thank you so much for sharing your knowledge! would be really nice if you could teach us how to make and horizontal movement on scroll. 🙏
@@aptvkey9495 That's a great idea, I will add it to my list
If you want to ensure that the text does not interfere with the hover events of the images, you can use the CSS property "pointer-events: none; "on the text element. This will make the text non-interactive, allowing the hover events to pass through to the underlying images.
i really like this channel 😍
You think or you know?😁 Thank you so much for your kind words!
Hey Andrea, thank you for this awesome tutorial it really helped me on my project🤩
Hey! So happy to hear that! 🤓
thank you so much for this video! is there a way to disable the regular pointer?
Ma,am Your project are Awesome 😘 And Your all video's are out of the Box {Love You}
Thank you so much ☺️
Def trying this out, SO cool
awesome vid! 🎉
I just read your email, I will reply to you there..
Hello Andrea! Great work, you helped me a lot with it!!!! How would you solve it, that the cursor gets different color on each picture? For example on one picture magenta, on the other picture cyan?
Hello Andrea!
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!
You're great, and your videos outstanding, thank you for sharing.
Aww, thank you, Juan for the lovely words!😃
let's go gsappp
GSAP is life!!! Kidding but it makes boring stuff cool 😎
Good job Andrea 🎉
As always, thank you Jean!🤩
@@andreaegli De rien Andrea. Je sème juste des pétales de rose sur ton chemin de la réussite 🙌
Hello Andrea, the truth is your videos are incredible and one always learns things and appreciates your time to make them, now comes the question, can you do the same but with the containers?
Hey Matias! Thank you so much!!!! Hmm, not sure I understand, the images are in containers. I only use containers in my videos. Either way, the effect works on anything as long as you add the class on the element. Let me know if you need more help!🤓
Hi, there should be a way to click (the cursor big) and get redirected to an other page or smooth scrolling to a section. Can't get this to be linked. Is there a solution?
Thanks for this amazing tutorial but one question is what if i want to add the functionality like when user clicks on particular image the image should get enlarge. Appreciate your help
You're welcome! You need to write additional code for that ;)
Hey, great tutorial! Do you have any idea how to solve this browser error? - "ReferenceError: mouseleaveHandler is not defined at"
Hiii Andrea, I saw on your video there's also a .cursor-play and I really want that too. Whenever I added the same code If (target.... - the cursor became laggy ;( maybe something wrong but without cursor-play, it works just fine :)
Here is the code I added:
function mousemoveHandler(e) {
const target = e.target;
const tl = gsap.timeline({
defaults: {
x: e.clientX,
y: e.clientY,
ease: "power2.out"
}
});
if (target.closest(".video-play")) {
tl.to(cursorSmall, { opacity: 0 })
.to(cursorPlay, { opacity: 1 }, '-=0.5');
} else {
if (target.classList.contains("video-play")) {
scale = 4;
} else {
scale = 1;
}
tl.to(cursorSmall, { opacity: 1, scale: scale })
.to(cursorPlay, { opacity: 0}, "-=0.5");
}
if (target.closest(".your-class")) {
tl.to(cursorSmall, { opacity: 0 })
.to(cursorBig, { opacity: 1 }, "-=0.5");
} else {
if (target.classList.contains("your-class")) {
scale = 4;
} else {
scale = 1;
}
tl.to(cursorSmall, { opacity: 1, scale: scale })
.to(cursorBig, { opacity: 0}, "-=0.5");
}
function mouseleaveHandler() {
gsap.to(cursorSmall, { opacity: 0 });
}}
Great content! What is the keyboard shortcut for commenting and uncommenting code?
Thank you! command + / (on Mac)
Hi Andrea! Thank you for the great content 🙂is it possible to display two different types of cursor changes? For example, cursor type one would display as per your video with "view" text to indicate a click through on a element. Then cursor type two would have an icon instead off text to indicate for example a side scroll on a different element?
Hey! Yes but you need to write some additional code 😉
Hey, I love your tutorials!
I think you have uploaded the wrong code in the description, or am I mistaken? :)
Hey, thank you 🤓
Yup, FIXD NOW! Thank you for letting me know
@@andreaegli It's redirecting me to a "you do not have access" page :s
@@Heph376 How about now?
@@andreaegli Yesss, it works now!
Thanks, you're the best!
@@Heph376 YESS!!
awesome
I don't know if I did something wrong but it really doesn't work on my side :/
Just have to follow the tuto or should I add gsap library before on my website ?
Hmm, did you add the whole code from the notion file and added the class on the elements you want the cursor to change on hover?
@@andreaegli yes of course !
@@baptistedebels8987 ok, send me screenshots of your code so we can pinpoint the issue
I have already added the URL and it is functional. However, I'm unsure of how to add a dynamic URL for each project that appears on hover. ??
another pearl !
...and more to come😎
Hi, i followed what you done, but it is not working. Even the custom cursor is also not showing.
Revisit all the steps. I've had someone else tell me the same thing only for them to have forgotten something... ex like a class in the right place. If you forget just one thing, nothing works. Without seeing your implementation I cannot help but with this advice ;)
is there a way to not show it on mobile devices? I deleted the code you had in the css portion but it's still showing on mobil.
Hi andrea! great tutorial as always keep it up like this !, one question, when writting the code in elementor especially the html part you are targeting "HTML" and "P", isnt that a little bit risky? will that change all the P i have on my websites? thanks in advance!
Hey Gaston! Nope, it will not affect your other tags on the page but if you want peace of mind, you can add an id to the p tag ex:
View project
#hello {
margin-top: 10px;
}
Hope this helps 😉
Thank you for this great tutorial ! I tested it out and it works perfectly. However the cursor goes under the popups and is not visible (I gave the cursor a z-index of 999), is there a solution to that ? Thank you !
You are very welcome! So happy to hear that ;) Ok, change it to z-index:2147483647 and don't forget to add the class on the popup ;) lemme know if it worked (it worked during my test)
@@andreaegli It worked ! Thanks for the help !
@@cherifidristerfous4837 woohooo!!! awesome!!!
@@andreaegli How can i hide it on mobile ? Cause it's showing itself whenever i touch the screen. Thank you
@@cherifidristerfous4837 I've added code for that in the Notion file. Let me know if you can't find it
Hello, great video. Does it work also without columns or only with containers?
Hey, thanks 😊 it should work with both sections & containers but to be honest I haven’t tested it with sections. Give it a try and let me know
Hi Andrea thanks for this tutorial! I don't understand where I'm wrong but, if I put custom code in elementor dashboard nothing happens. If I add the code in the specific page adding an html widget the effect comes out... I also have another problem, it seems like part of the html code is shown in the header.
Could you help me finding out what I'm doing wrong?
Thank you!
Bruno
did you change the class
You can see my comment for solution. You need to add and on the "custom cursor html" part of the video
Thank you very much for another great tutorial.
any chance to get the exact code that you use in your video?
i find it difficult to handle the missing parts.
much appriciated.
You are very welcome! The code in the notion file is the same as in the video. What do you think you’re missing?
@@andreaegli Thanks for replying.
1) i copied the html+css code and paste them into custom code (head).
I added YOUR CSS CODE and after that i added YOUR HTML CODE.
2)I copied the JS and paste it in custom code(body end)
and nothing happened. couldnt even see the basic cursor.
also i named some elemets with the class name "your-class" and still havent see anything.
I wonder what am i missing.
thanks alot again!
maybe something is not matching with "big\small\eye\plain"?
@@kani7345 Ok., can you send me screenshots of your code both, CSS+HTML & JS? here: herllo @ egliandreastudios.com
this is too bizare not to investigate
@@kani7345 that's what it is!!!!! let me change that in the notion file, I know where the mistake is
Hello Andrea, Emanuel here again. I love your browser! could you share the name?
Hey Emanuel! I'm using Arc browser
@@andreaegli Thanks!
amazing videos
Thank you so much! Oops! Code has been now added in the description😁
what's this browser?
Arc browser, only a available for mac atm
Awesome tutorial 😃 I think you forgot the code 😛
thank you! I did indeed!!!!! Oops! Code has been now added in the description😁
i got some tricks about elementor and woocommerce that i would like to share with you
Fire away! 🤓
Code? 🤔
Oops! Code has been now added in the description😁
Hello Andrea!
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!