Jump to content

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

Animation co-ordinates wrong after resize

Recommended Posts

Hey Wayrse and welcome to the forums! 


Sorry I'm on mobile right now and can't do too much testing myself, but it's generally a good idea to do the element centering in GSAP and not mix CSS transforms with GSAP if you can help it. 

  • Like 1
Link to comment
Share on other sites

Also, using TweenMax.set() can make those style declarations easier.

Link to comment
Share on other sites

@ZachSaucier Thanks for the tip, it looks like you're right - setting all the position properties with .set() fixes the issue.


Thanks for taking the time to answer my question! :)

Link to comment
Share on other sites

I'm happy to help! I'm so glad I was about to without testing myself, hah.

Link to comment
Share on other sites

Yep, just to be clear about why this is happening...

  1. In order to maximize performance, GSAP caches the transform values after the first time it parses them because typically it's a huge waste to read the computed style again and decompose the matrix() or matrix3d() into the components (x, y, scaleX, rotation, etc.). You can force GSAP to re-parse them by setting parseTransform:true on your tween, but I'd strongly recommend always handling transforms directly through GSAP so that you get maximum performance. It also avoids rotational ambiguities that come from decomposing matrices (that's just the nature of them - it has nothing to do with GSAP)
  2. You had a percentage-based translate transform on your element that was set in the CSS, but when the browser reports the computed value it's always as a matrix() or matrix3d() which never contains percentage-based information - it's all converted to px, so GSAP simply cannot know that your intent is to use percentage-based values. This is another reason why it's best to use GSAP for all this because it'll store all of that data for you and keep it crystal clear for all future tweens :)

So to "fix" your old version, you can just set all those values through GSAP (best), or you could simply add parseTransform:true to your tween and put a tl.invalidate() in your click handler so that it tells the timeline to re-initialize things on the next render. 


Like @ZachSaucier suggested, the simplest, most bullet-proof solution is to just use GSAP for it all instead of mixing CSS and GSAP.


Happy tweening!

  • Like 3
Link to comment
Share on other sites

@GreenSock this was going to be my follow up question... but why? :-P Thank you for the beautiful explanation!

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