tailbreezy Posted February 12, 2021 Share Posted February 12, 2021 Hello, When I flip I end up with transforms applied. It seems this was the expected behavior, but how to clear them and match from and to. Thanks See the Pen ec012fc5140b3073b8742bd3d0d5d6bd?editors=1010 by dadacoded (@dadacoded) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted February 12, 2021 Solution Share Posted February 12, 2021 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? 4 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 12, 2021 Author Share Posted February 12, 2021 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 14, 2021 Share Posted February 14, 2021 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. 2 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 14, 2021 Author Share Posted February 14, 2021 Awesome. Thank you, Jack! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now