Scroll trigger inside of Scroll trigger parallax

[MarcelDev]

Hello 

I have a problem with my scroll trigger animations. i want to make a pin panel animation that would stack my page_sections. and inside of each page section there will be scroll trigger with its own animation.

i made this far that if in my Home component enable pin spacing on true the animations work but the panels are not stacking like if pinSpacing is false.

But i cant figure out how to make it work that i would pin the element and make the animation like:
hero anim -> 1 parallax section -> hotspot anim -> 2 parallax section -> and so on...

now i am getting 
hero anim and 1 paralax section at the same time. and then hotspot anim and 2 paralax section at the same time.
and because of that not all animations are seen.

See the Pen emZrrVB by Marcel-Kavcic (@Marcel-Kavcic) 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! 

[MarcelDev]

Yeah i was making exactly this way. First making an animations inside of separate components then added the scroll trigger inside of them and then adding the scroll trigger to parent component and then i encountered the real problems. 
Now my real question is if this that i want to make is even possible in a way i want to do it.
Now by your examples i got an idea that maybe i would make a wrapper that have like 100vw and 100vh with overflow hidden. then i would make an illusion of scrolling by translating the components from Y 100% to Y 0 to make pretty much same effect that i want to make. 

Thanks for guidelines. 
Will try to get something out of it.

[Rodrigo]

Hi,

 

If I understand correctly what you're trying to do, you need to keep using pinSpacing: false but manually create the pin space required to run the animation in the current section before the next one stacks over it.

 

These demos show that approach:

See the Pen mydXBaX by GreenSock (@GreenSock) on CodePen.

 

See the Pen yLWPybV by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[MarcelDev]

Yes this is the thing i was looking for. 

Thanks!

 

[MarcelDev]

I managed to implement it and it works perfect! Thanks for your help