danosaur Posted August 6, 2022 Share Posted August 6, 2022 Hey dear GSAP superheroes, I most likely suck at looping and I can't seem to understand why this interaction doesn't work on single items. I had a similar issue with scramble text but then Jack was so kind and helped me out ( ). I tried to do this the same way, but the SVGs only draw when I hover over the first box and all of them animate simultaneously. What am I missing? Any comment or advice is much appreciated! See the Pen WNzJLdJ by danielapro (@danielapro) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 7, 2022 Solution Share Posted August 7, 2022 Your loop was fine - you were just using standard selector text like ".curve" for your tween which matches ALL elements in the entire document with that class, but you want to use querySelector() on each item to only look for the ones INSIDE that element: //BAD gsap.from(".curve", {... // GOOD gsap.from(item.querySelector(".curve"), {... See the Pen wvmjOxW?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
danosaur Posted August 7, 2022 Author Share Posted August 7, 2022 Thanks so much Jack! Didn't know GSAP accepts the queryselector like that! Very cool! Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2022 Share Posted August 7, 2022 Just to be clear, it has nothing to do with GSAP: // this... gsap.from(item.querySelector(".curve"), {...}); // ...is the same as this: let myCurve = item.querySelector(".curve"); gsap.from(myCurve, {...}); It's just feeding whatever was returned from the .querySelector(...) into the tween as the target. It happens totally outside of GSAP. 2 Link to comment Share on other sites More sharing options...
iDad5 Posted August 8, 2022 Share Posted August 8, 2022 @GreenSock I actually had to look up how this works... It's a far too clever solution for me to ever use it though, as I might die of old age before figuring out what I have done there if I will ever have to revisit the code at some future point. Your deep deep understanding of that stuff never ceases to impress me. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now