Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Flipping SVGs

Recommended Posts

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 post
Share on other sites

Simply Fantastic :)


I got thrown off by the width prop as well and was surprised when it helped.


It seems I forgot to set x,yPercents in gsap when I was prepping the demo. Initially the issue was an extra transformY of 100px as set in the tween.

  • Like 1
Link to post
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)




Sorry about any confusion there. 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Awesome. Thank you, Jack!

Link to post
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.