Jump to content
GreenSock

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

ScrollTrigger.batch. When y:0 is specified, it is set to (0,50%)

Recommended Posts

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 code
https://jsfiddle.net/fLno0mq3/

 

How can this be?

 

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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

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.
×