When scrolling down a batch, the stagger doesn't seem to work correctly

[Kent Pilkington]

I only just recently discovered stagger, and it seem to only be documented on a Codepen. As I reveal the rows, the first box comes in as expected, but then the second two come in at the same time rather than staggering. And if I add more frames to the grid-template-columns, things get even more strange - at 5 frames, the first one animates, followed by the last and then the others in order, but at 4 frames the first one animates, then the second and fourth, followed by the third.

 

I've tried specifying from: 'start', using 'end' I would have expected to animate from the last to the first, but with 4 frames it seems to animate the third, then second, then first and fourth together.

 

Anyone have any idea why such bizarre behavior? (or is this not actually bizarre, and I'm just not understanding something basic?)

See the Pen QWzVgqm by ThinkByDesignInc (@ThinkByDesignInc) on CodePen

[Kent Pilkington]

Also worth noting that things are animating as expected if they were already in the viewport. It's only once I start scrolling that things seem to be happening out of order.

[GreenSock]

Are you trying to do this?: 

See the Pen dywqdjr?editors=1010 by GreenSock (@GreenSock) on CodePen

[Kent Pilkington]

Yes. The only thing I see different about yours is that you aren't using scrub (which I forgot was there and didn't seem to make any difference here), and that you aren't specifying how to handle the grid - from the documentation, I understood "auto" to be the thing that would be required in order to get the effect that you have, but it seems maybe there is a default value that does that instead?

 

Just for my own education, and for the sake of batch noob posterity, why does "auto" NOT work for this situation, which begs the question of what it IS supposed to do - when is it the right tool for the job?

[GreenSock]

Sorry about the tardy reply, @Kent Pilkington. It's been a crazy few weeks with the new site launch

 

There really wasn't any reason to use grid in your stagger since all the elements were in a line. But your demo did help me find a bug, so thank you! If you use grid: "auto" on a group of elements that isn't actually in a grid (they're all just positioned horizontally, no wrapping), the final element could have its timing miscalculated. That should be fixed in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Thanks for your patience, and sorry about any confusion there.