Jump to content

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

Transform Origin Strange Behaviour Help

Go to solution Solved by GreenSock,

Recommended Posts

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?



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

Link to comment
Share on other sites

  • Solution

I'm not seeing the issue, but I'd bet it's just because the image hasn't loaded yet, thus the height is 0 at that point. That also explains why it would be intermittent - it depends how fast the image loads. Sometimes it may be there by the time the JS runs, sometimes not. My recommendation would be to set a specific height if you can *OR* just wait until everything loads before executing your animations :)


7 hours ago, BB123 said:

p.s. loving V3! 💚💚💚



  • Like 3
  • Thanks 2
Link to comment
Share on other sites

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 :)

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