ScrollTrigger overlapping Sections but at the third section the rest doesnt overlap

[LIEPS GmbH]

Hello Folks, 

 

i created a ScrollTrigger animation where i want to achieve a overlapping effect. After the second section it breaks and the rest doesnt showed up. It stucks on the bottom. 

 

Whats wrong with it? Thanks to all.

See the Pen YPzwrMo by Sofatroll (@Sofatroll) on CodePen.

[mvaneijgen]

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

Hope it helps and happy tweening!