[Transform Origin Strange Behaviour Help]

Ah yess thank you so much! Makes sense, setting the height of the image works perfectly 💚🥳😎👍☀️🌕🚀

 

I usually always have everything in some kind of dom ready wrapper but not for this google ad banner project so that explains why I've never come across this before

[Transform Origin Strange Behaviour Help]

Hello Green Socks! 

 

I'm having a very confusing issue with an animation I'm doing, where the transform-origin seems to (sometimes) quickly flip to a value I have not defined anywhere. I recreated a super simplified version showing the issue. The codepen version for some reason does not have the issue(??) ** But it happens on my local machine and also on the server here >> https://vektor.co.uk/dev/gsap-debug/970x250--debug/

 

So the transform-origin should always be 50% 50%, but it quickly flips to '275px 0' before swapping back, this causes the image to jump around. I even added a 'set' to the start of the code, and also added it into the tween itself. it is also in the timeline 'defaults{}'.

Can anyone shed some light on what is going on and how I can make sure the transform origin never changes? Is this a bug or does it make sense somehow?

Cheers!

 

p.s. loving V3! 💚💚💚

 

** EDIT: I have seen the issue happen on codepen if I open it in a window and refresh it enough times

>> EDIT2: seems to be some sort of caching issue? Happens with devtools open or in new incognito window. But I don't think it's an issue of GSAP.js not loading quickly enough, as the animation starts with the image transformed, which is done via gsap code? (uses a 'from' tween which always shows up immediately). (It is going to be a google banner so assuming that most people will see it like this, on a 'first load' basis, if that makes sense)

See the Pen MWpBzJe by bananafarma00 (@bananafarma00) on CodePen