BB123 Posted June 9, 2021 Share Posted June 9, 2021 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 9, 2021 Solution Share Posted June 9, 2021 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! 💚💚💚 🎉 3 2 Link to comment Share on other sites More sharing options...
BB123 Posted June 10, 2021 Author Share Posted June 10, 2021 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now