Layered pinning animations firing late?

[jaudy]

Hey there, I am using the layered pinning demo but having some trouble figuring out the timeline/fromTo animations.

I am trying to get the columns to animate after the scroll snaps to the section that contains them, it is sort of happening, but I'm clearly not quite understanding something.

For some reason the animation doesn't fire when the scroll stops after it snaps to the section, and instead if I scroll the scroll bar a little past the top of the section, the animation does play, additionally a scroll back up causes the reverse animation to instead go back to the from position without animating its progress.

If anyone can point me in the right direction or what I am doing wrong, it would be appreciated.

 

Thanks

See the Pen JjQRmyY by Jaudy (@Jaudy) on CodePen.

[mvaneijgen]

I almost never use .fromTo(), because most of the elements you animate are either in there end state or their starting state, so a simple .from() or .to() is all you need. In this case a .from() is the best solution. I've reformat your pen a bit (because I was trying to debug it) I've used a stagger instead of a loop, same result clearer way of writing it.

 

As stated above your elements are already at y: 0, so a simple .from() where you want them to come from is easy and instead of y: "100vh" I've used yPercent: 100, which tells the animation animate these elements from their own height. I've used the GSAP helper function selector to scope your elements to the current section (your initial solution wasn't bad, but due to debugging I had changed some things) and these helper functions are awesome! https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() 

 

Now for what you come here for! The two sections are right on top of each other, but they have a 1 pixel difference. Your snap function snaps to the end of the first section, but due to it being a pixel off it will not trigger the next, you literally need to scroll 1 extra pixel to have it trigger its animation. So my soltion is to set the end of the scroll to +=101% to make it scroll past the trigger of the next section 🎉 (if 101% is to much you can also do "bottom+=1px". or 2px to make sure)\

 

Hope it helps and happy tweening! 

 

See the Pen VwJKqzJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.