Jump to content
Search Community

Flipping SVGs

tailbreezy test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

  • Solution

Hey tailbreezy.

 

First off, you're making one of the most common GSAP mistakes: not setting all of your transforms with GSAP on elements that you're affecting with GSAP.

 

Is this what you're wanting to do?

See the Pen abBBeRq by GreenSock (@GreenSock) on CodePen

 

Side notes:

  • Usually it's more common to use the same <svg> and then use <g>s to move things around as needed.
  • Note how I included the clearProps between the .getState() and the .from().
  • Width should be automatically recorded by Flip, I'm surprised that removing the { props: "width" } bit causes a jump in the width when the Flip animation starts. @GreenSock do you know why that is?

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Ah, very interesting - yeah, this is a very unique circumstance with a root-level SVG element that has its contents scaled. Browsers handle those in a unique way. It was throwing off the global matrix values for just that type of element. It should be resolved in the next release which you can preview on CodePen with: https://assets.codepen.io/16327/Flip.min.js (you may need to just clear your cache)

 

Better?

 

Sorry about any confusion there. 

  • Like 2
  • Thanks 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...