Rossmiester

@Rodrigo Noted! MDN bookmarked! Thanks buddy!

If I could ask a question about your solution... what does .closest do? I also never thought of doing a foreach loop. Thanks a million!

OMG! Y'all are amazing! Exactly what I wanted to do. Damn, took me days and took you all of a few minutes. Oh well, at least I am learning along the way lol. You all are rockstars and I appreciate this community so much. I will always be a member! Thank you!!

Attaching video of what is happening on the website.. thank you! scrnli_6_13_2024_4-00-15 PM.mp4

Hi, I am having a hell of a time trying to figure this one out. I have spent days tweaking code, rewriting code, etc. The codePen below shows you in a nutshell what I am trying to do. Though it seems like it is working fine, on mouseleave gsap should reverse the drawSVG animation so its a nice smooth animation. Obviously I am missing the gsap drawSVG plugin files to render it all how it looks on my computer. Issue: Current code will loop through all the buttons but fire all button animations at the same time. So, when hovering one button, the other buttons also hover and the drawSVG is seen animating on all buttons. I am trying to have it so on hover of one button it performs the hover drawSVG animation on that specific button. Any help would be great. Thank you!! https://codepen.io/MikeyJRossi/pen/VwOrxxV

Gotcha - thanks for the super duper quick response. Y'all rock!

Hi, I am trying to use drawSVG on a ::before pseudo element, is this possible? Thank you!

Yup - perfect. Thanks so much!

I realized when I added the methods to the timeline that I forgot to rid the gsap part. Now its working correctly, I just need to speed it up. Thanks for your help - truly appreciated!

Updated -- https://codepen.io/MikeyJRossi/pen/OJvNwJz

I am trying to make the propellers repeat continuously. I know you do a "repeat: -1" but I only want it to repeat the whole sequence and not every single element to give it the effect of spinning. I tried creating a timeline and putting the repeat: -1 there but that doesn't work.

No freaking way - lol. I am so dumb, wow. You don't know how long i've been trying to figure this out. For some reason I thought the hash was supposed to be there. Gosh... THANK YOU FOR SAVING ME!

Don't worry about the other Propellers not working. I am just focused on making the one animate the way I want first. I've commented the code in the JS that is problematic https://codepen.io/MikeyJRossi/pen/JjLXZqo

Hi, Thanks for the quick response. I also tried the call without the () and it still returns "null". I am going to try and recreate my issue here. Thanks

Hi, I am targeting an element within an svg that has an id (<path id="idName"> </path>) and when I console.log it or run the function I get back "null." What I am trying to do is hide that element via style="none". So I am calling a function on the onComplete var (onComplete: myFunc()), that function is simply using an getElementByID storing it in a variable and then assigning the style.display to none (e.style.display = "none"). I have searched the web for answers and some people have said that the DOM hasn't loaded entirely by the time the function is called. Some have said to use .addEventListener (document.addEventListener("DOMContentLoaded", myFunc)) or move the function to the end of the document. I have tried both and still logging "null." Seems like a pretty basic thing but any help would be appreciated. Thanks!

@GreenSock I am glad I reached out to you bc your answer solved my issue. I am such a bonehead. I am not sure why but that code I had was conflicting with the ScrollTrigger JS. I just deleted it and it works. Odd bc I don't remember ever adding the script to my project but oh well. Thanks. You can delete this thread. Thanks again :]

@GreenSock Excellent - thanks for the super quick response. Let me see if I can get a codepen up. Thanks!!

Hi I am using GreenSock on my WordPress website and getting the error "Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')" - see image. GreenSock animations are working but this error happens when I add the ScrollTrigger js. I have searched the web for answers but have had no luck. Any help would be great. Thanks!