Jump to content
Search Community

Animation co-ordinates wrong after resize

Wayrse test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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