Animating marginTop and scrollTrigger

[Pedro Rezende]

Hello all!

 

I'm a bit stuck trying to figure out why my scrollTriggers aren't firing the way I want them to.

 

What I'm aiming for is to have an animation at the top and then have the next section (2) kind of overlap with the bottom of that animation. This section (2) kicks off the content, and from there, each following section has its own scrollTriggers.

 

When I remove the marginTop animation, the triggers work fine.

 

Could you give me a hand in quickly understanding what I might be doing wrong or not getting right?

 

Thank you in advance!

 

Edit: I just realized that the code works fine in the small Codepen iframe. If you open the codepen URL or run in a bigger screen, the animations don't trigger correctly

See the Pen zYyqaKZ by prznd (@prznd) on CodePen

[Rodrigo]

Hi,

 

Just use pinSpacing false for the first section:

See the Pen RwEaBgN by GreenSock (@GreenSock) on CodePen

 

The problem here is that you are animating a property that is actually changing the document's height which messes with the calculations ScrollTrigger does. To clarify is not that the calculations are wrong, is just that, for justified reasons, ScrollTrigger doesn't expect those kind of changes down the road, so the calculations are right but as the margin animation is happening, the next sections are moving up as well, but the triggers are in the same position, thus creating the problems with the animations seemingly not running when they should.

 

Hopefully this helps and clear things up.

Happy Tweening!

[mvaneijgen]

Hi @Pedro Rezende

 

I've moved some of the logic around. Personally I like my elements to be positioned with CSS where they will end up when the animation is done. So I've created a new element called .mySections and put your two sections in that. Then with a CSS grid trick to position both sections right on top of each other. 

 

There are some properties your better of not animating, these are width, height, left, top, right, bottom, margins and paddings are also better left alone. Instead you're better of animating the transform properties. So in your animation where you animate left: I swapped it out for x: () => window.innerWidth, this is a function based value which gets the current window width and animates it with a translateX, which is much more performant. I've also just did a .to() instead of a .fromTo(). because the ball is already at translateX: 0, so I don't need to specify it, I just move it .to() the window width. 

 

Your margin bottom I've swapped out for a .from() yPercent: 100, which will animate the hello section from 100 percent its own height, with these changes everything else seems to spring alive, but if you still feel something is missing, let us know. 

 

Oh I also changed end: () => `${window.innerHeight} top`, instead of +=1000px it gets the current window height and uses that as the amount, this 'feels' nicer with the hello section scrolling in the same distance. Hope it helps and happy tweening! 

 

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

[Pedro Rezende]

Thank you very much @Rodrigo and @mvaneijgen! Very cool insights.

 

@Rodrigo regarding your solution, I couldn't set the `pinSpacing` prop to `false` because I need a bigger timeline animation than the example I provided. I could set a kind of manual spacing, in order to place the animation correctly, but I think it would make maintenance and future changes a bit harder.

 

@mvaneijgen the trick of using grid to underly elements but keep their height was absolutely amazing. I've managed to solve the problem using that!

 

Thank you all!