Тёмный

GSAP CURSOR CHANGE ON HOVER - Elementor Wordpress Tutorial Flex Container 

andrea egli
Подписаться 15 тыс.
Просмотров 12 тыс.
50% 1

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 91   
@matanzagag
@matanzagag 6 месяцев назад
thank you so much for this video! is there a way to disable the regular pointer?
@shazam23
@shazam23 5 месяцев назад
Great content! What is the keyboard shortcut for commenting and uncommenting code?
@andreaegli
@andreaegli 5 месяцев назад
Thank you! command + / (on Mac)
@chinmaygambhirrao9774
@chinmaygambhirrao9774 4 месяца назад
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
@andreaegli
@andreaegli 4 месяца назад
You're welcome! You need to write additional code for that ;)
@mybrandzin
@mybrandzin Год назад
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!
@christos_thanas
@christos_thanas 9 месяцев назад
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.
@mariazottler6273
@mariazottler6273 Месяц назад
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?
@andreaegli
@andreaegli Год назад
We're building a trendy feature/effect and that is a GSAP cursor change on hover! Woohoo!
@aptvkey9495
@aptvkey9495 Год назад
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. 🙏
@andreaegli
@andreaegli Год назад
@@aptvkey9495 That's a great idea, I will add it to my list
@chubbec
@chubbec Месяц назад
Hey, great tutorial! Do you have any idea how to solve this browser error? - "ReferenceError: mouseleaveHandler is not defined at"
@johanstam3602
@johanstam3602 Месяц назад
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?
@erhamotionvideo7517
@erhamotionvideo7517 Год назад
i really like this channel 😍
@andreaegli
@andreaegli Год назад
You think or you know?😁 Thank you so much for your kind words!
@baptistedebels8987
@baptistedebels8987 Год назад
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 ?
@andreaegli
@andreaegli Год назад
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?
@baptistedebels8987
@baptistedebels8987 Год назад
@@andreaegli yes of course !
@andreaegli
@andreaegli Год назад
@@baptistedebels8987 ok, send me screenshots of your code so we can pinpoint the issue
@azombi52
@azombi52 Год назад
Hey Andrea, thank you for this awesome tutorial it really helped me on my project🤩
@andreaegli
@andreaegli Год назад
Hey! So happy to hear that! 🤓
@grimreefer533
@grimreefer533 5 месяцев назад
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?
@andreaegli
@andreaegli 5 месяцев назад
Hey! Yes but you need to write some additional code 😉
@Heph376
@Heph376 Год назад
Hey, I love your tutorials! I think you have uploaded the wrong code in the description, or am I mistaken? :)
@andreaegli
@andreaegli Год назад
Hey, thank you 🤓 Yup, FIXD NOW! Thank you for letting me know
@Heph376
@Heph376 Год назад
@@andreaegli It's redirecting me to a "you do not have access" page :s
@andreaegli
@andreaegli Год назад
@@Heph376 How about now?
@Heph376
@Heph376 Год назад
@@andreaegli Yesss, it works now! Thanks, you're the best!
@andreaegli
@andreaegli Год назад
@@Heph376 YESS!!
@dileepbatchala1590
@dileepbatchala1590 7 месяцев назад
Hi, i followed what you done, but it is not working. Even the custom cursor is also not showing.
@andreaegli
@andreaegli 7 месяцев назад
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 ;)
@KRISHNAANUBHAVKavy
@KRISHNAANUBHAVKavy 10 месяцев назад
what's this browser?
@andreaegli
@andreaegli 10 месяцев назад
Arc browser, only a available for mac atm
@gastonhenrich2492
@gastonhenrich2492 Год назад
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!
@andreaegli
@andreaegli Год назад
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 😉
@decrea8439
@decrea8439 Год назад
i got some tricks about elementor and woocommerce that i would like to share with you
@andreaegli
@andreaegli Год назад
Fire away! 🤓
@ElDatoRD
@ElDatoRD Год назад
Hello Andrea, Emanuel here again. I love your browser! could you share the name?
@andreaegli
@andreaegli Год назад
Hey Emanuel! I'm using Arc browser
@ElDatoRD
@ElDatoRD Год назад
@@andreaegli Thanks!
@ExCiSiioN1
@ExCiSiioN1 Год назад
Hello, great video. Does it work also without columns or only with containers?
@andreaegli
@andreaegli Год назад
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
@laxmansapkota-n5i
@laxmansapkota-n5i Год назад
Ma,am Your project are Awesome 😘 And Your all video's are out of the Box {Love You}
@andreaegli
@andreaegli Год назад
Thank you so much ☺️
@cherifidristerfous4837
@cherifidristerfous4837 Год назад
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 !
@andreaegli
@andreaegli Год назад
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)
@cherifidristerfous4837
@cherifidristerfous4837 Год назад
@@andreaegli It worked ! Thanks for the help !
@andreaegli
@andreaegli Год назад
@@cherifidristerfous4837 woohooo!!! awesome!!!
@cherifidristerfous4837
@cherifidristerfous4837 Год назад
@@andreaegli How can i hide it on mobile ? Cause it's showing itself whenever i touch the screen. Thank you
@andreaegli
@andreaegli Год назад
@@cherifidristerfous4837 I've added code for that in the Notion file. Let me know if you can't find it
@billycool9961
@billycool9961 Месяц назад
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!
@matiasleandrobalbi7147
@matiasleandrobalbi7147 Год назад
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?
@andreaegli
@andreaegli Год назад
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!🤓
@kovinhas
@kovinhas Год назад
Awesome tutorial 😃 I think you forgot the code 😛
@andreaegli
@andreaegli Год назад
thank you! I did indeed!!!!! Oops! Code has been now added in the description😁
@brunosimonini4137
@brunosimonini4137 4 месяца назад
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
@Gokuzarif
@Gokuzarif 2 месяца назад
did you change the class
@billycool9961
@billycool9961 Месяц назад
You can see my comment for solution. You need to add and on the "custom cursor html" part of the video
@relax2686
@relax2686 Год назад
amazing videos
@andreaegli
@andreaegli Год назад
Thank you so much! Oops! Code has been now added in the description😁
@aquibjaved4084
@aquibjaved4084 10 месяцев назад
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. ??
@juandylan4052
@juandylan4052 Год назад
You're great, and your videos outstanding, thank you for sharing.
@andreaegli
@andreaegli Год назад
Aww, thank you, Juan for the lovely words!😃
@mybrandzin
@mybrandzin Год назад
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!
@thewebstylist
@thewebstylist Год назад
Def trying this out, SO cool awesome vid! 🎉
@andreaegli
@andreaegli Год назад
I just read your email, I will reply to you there..
@tannerhodgkinson8385
@tannerhodgkinson8385 5 месяцев назад
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.
@kani7345
@kani7345 Год назад
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
@andreaegli Год назад
You are very welcome! The code in the notion file is the same as in the video. What do you think you’re missing?
@kani7345
@kani7345 Год назад
​@@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
@kani7345 Год назад
maybe something is not matching with "big\small\eye\plain"?
@andreaegli
@andreaegli Год назад
@@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
@andreaegli
@andreaegli Год назад
@@kani7345 that's what it is!!!!! let me change that in the notion file, I know where the mistake is
@AllenLu
@AllenLu Год назад
let's go gsappp
@andreaegli
@andreaegli Год назад
GSAP is life!!! Kidding but it makes boring stuff cool 😎
@sandrarg2661
@sandrarg2661 Год назад
Code? 🤔
@andreaegli
@andreaegli Год назад
Oops! Code has been now added in the description😁
@MusfiqurRahmanPeush
@MusfiqurRahmanPeush 5 месяцев назад
awesome
@jean-mahmoud_du_tacobel
@jean-mahmoud_du_tacobel Год назад
Good job Andrea 🎉
@andreaegli
@andreaegli Год назад
As always, thank you Jean!🤩
@jean-mahmoud_du_tacobel
@jean-mahmoud_du_tacobel Год назад
@@andreaegli De rien Andrea. Je sème juste des pétales de rose sur ton chemin de la réussite 🙌
@teuccio73
@teuccio73 Год назад
another pearl !
@andreaegli
@andreaegli Год назад
...and more to come😎
@Seemenowhere
@Seemenowhere Год назад
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 }); }}
Далее
Awesome Mouse Spotlight Effect in JS & GreenSock
13:32
Custom Cursor Elementor Pro INVERTED EFFECT
22:51
Просмотров 13 тыс.
Change Images on Hover in Elementor (3 Methods)
13:18
Glow Effects Animation | Elementor Container Tutorial
8:05