qqignatqq Posted May 18, 2021 Share Posted May 18, 2021 Apparently I found a bug. It's really, really weird. So weird that I doubt it's even a bug. I tried to find a mention of this bug on Google, but I found nothing. SO... I actually recorded this bug on video: https://disk.yandex.ru/i/auE3Yt8DiGK57g but here is the text version: If you specify a font size of 2.8vw (in other sizes it happens too, but with a different probability) and a screen width of 600px, the 'y:0' animation will be executed as 'transform: translate(0%, -50%)' Here's the codehttps://jsfiddle.net/fLno0mq3/ How can this be? Link to comment Share on other sites More sharing options...
GreenSock Posted May 18, 2021 Share Posted May 18, 2021 Yeah, believe it or not that's actually not a bug Solution: Add this to the top of your code: gsap.set(".anim", {x: 0, y: -10, xPercent: 0, yPercent: 0}); Explanation: This is why we always...ALWAYS...recommend setting your transforms explicitly via GSAP (rather than only in CSS) so that it knows exactly what your intent was plus it caches them for maximum performance. When GSAP parses the current transforms on an element, it has to break it down into the components (x, y, xPercent, yPercent, scaleX, scaleY, rotation, etc.) and by default all translations go into "x" and "y" EXCEPT if it's exactly -50% of the width/height because that's a common case where people intend for that to go into xPercent/yPercent instead (typically they're centering it). Remember, you can COMBINE x/y/xPercent/yPercent in GSAP for very powerful and convenient effects. So in your problematic scenario, you must have set it up such that it ended up being -50% of the elements' height, so it put it into the "yPercent" rather than "y". It's a common mistake not to set the transforms via GSAP, but doing so will solve problems like this (and many others). Does that clear things up? 2 Link to comment Share on other sites More sharing options...
qqignatqq Posted May 18, 2021 Author Share Posted May 18, 2021 4 hours ago, GreenSock said: Does that clear things up? more than enough. Thank you! You have no idea what kind of face I was sitting with when I saw this strange animation behavior. 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