Jump to content
Search Community

SVG Path animation issues

Premium Funding test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

  • Like 1
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...