Target children of svg

[tomKnox 4 Likes (Newbie)]

Hi it's been such a long time since I've played with gsap.
Hope everyone has been doing fine :)

Would someone please shed a light. 
I would love the fact that my triangles are spread across the screen on page load.

For some reasons, the positions are all identical. I current have tried to regenerate the random value in a for loop, I console.log different values.
Still, all paths go to the same position. I'd love them to be spread around.

Thank you for your expert advice.

See the Pen PavNqq by vi54 (@vi54) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @tomKnox 

 

That is the expected behavior with all the staggers going to the same location. You could add a .to() tween to the loop and target paths[0], paths[1] etc..., but I think this is good case for function based values. 

 

 

See the Pen GGbpRj by PointC (@PointC) on CodePen

More info:

https://greensock.com/function-based

 

Happy tweening.

 

[tomKnox 4 Likes (Newbie)]

Hi PointC. Thanks for clearing that out. I am positive I won't forget this. 
Very much appreciated!
 

[tomKnox 4 Likes (Newbie)]

hmm, when the svg is part of a child in rows/columns the path doesn't seem to get recognised.

In previous tests I had an svg manually placed in the body of the html and that works perfectly.

Would you mind if I privately send you the link, as this is a disclosed project.
I understand any answer and will obviously look for a solution myself.
 

[PointC 8,599 Likes (Superhero)]

You can send me the link via PM and I'll take a quick peek at it.