Jump to content
Search Community

Target children of svg

tomKnox test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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:



Happy tweening.



  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...