Can't apply drawSVG to individual components

[danosaur]

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

[GreenSock]

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

[danosaur]

Thanks so much Jack! Didn't know GSAP accepts the queryselector like that! Very cool!

[GreenSock]

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. 

[iDad5]

@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.