SVG Path animation issues

[Premium Funding 1 Likes (Newbie)]

I am trying to have the arrow group move along the X while fading in and have the inner svg paths stagger fade in, but it seems the group move and fade won't work with the stagger of paths.

See the Pen RwPGXWQ by james182 (@james182) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Premium Funding and welcome! Thanks for being a Club GreenSock member. What do you mean "it seems the group move and fade won't work with the stagger of paths"? It is indeed animating the red blocks, the blocks just aren't visible until after most of the slide has already completed. Starting them at the same time shows that it's working:

See the Pen qBdrNaL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Maybe if you explained your exact goal a little more we could help further?

[Premium Funding 1 Likes (Newbie)]

I have the idea of having each of the 4 banners "paths" come in, from x: -200, opacity: 0, stagger: 0.5  but the origin of the paths is an issue, thats why i did the group to fadein and move on the x axis.

See the Pen WNvpxJE by james182 (@james182) on CodePen

as you can see the paths aren't showing in the viewbox and are going somewhere outside that.

[GreenSock 18,597 Likes (Superhero)]

Ah yes, sorry about any confusion there and thanks for the reduced test case! Very helpful. 

 

There was indeed an issue with the way GSAP interpreted transform data that was set OUTSIDE of GSAP and had a non-standard origin. In your case, you've got transforms applied like this: "translate(55.500000, 53.500000) rotate(-90.000000) translate(-55.500000, -53.500000)" which basically is a rather verbose way of rotating the SVG shape around a different origin. 

 

I think I've got it fixed in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Better?