Animation co-ordinates wrong after resize

[Wayrse 1 Likes (Newbie)]

See the Codepen for directions.

 

Anybody have any ideas?

See the Pen eefa2490608fbac08bcf8651168081f0 by MarioD (@MarioD) on CodePen

[ZachSaucier 467 Likes (Leader)]

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. 

[ZachSaucier 467 Likes (Leader)]

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

[Wayrse 1 Likes (Newbie)]

@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!

[ZachSaucier 467 Likes (Leader)]

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

[GreenSock 8,117 Likes (Superhero)]

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!

[Wayrse 1 Likes (Newbie)]

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