white space | scrollTrigger

[Mo5]

I'm Trying to create something like this

but there is a white space come when I pinning the section 

 

See the Pen GRBpyQN by noX10M (@noX10M) on CodePen

[GreenSock]

I noticed a few problems: 

1. You're pinning an element INSIDE another pinned element. That won't work.
2. You're using outdated files
3. You're loading a ScrollTrigger that's not from GreenSock (AND the one from GreenSock). 
4. You're nesting a tween with a ScrollTrigger INSIDE a timeline. You can't have the parent timeline's playhead control the tween's position AND the scrollbar position (it's logically impossible). You should apply the ScrollTrigger to the timeline itself, not the nested tween. 

Here's probably how I'd do it: 

See the Pen dyjYeBX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Basic strategy: 

• To create the overlap, put an "empty" tween at the end of the timeline so that all the animation stops before the end. The space should equal 1 / 3rd in this case (because you've got two sections, thus the third one is basically the next element below - the one that's coming in to overlap). 
• Set a margin-top of -100vh on that next panel so that the normal document flow creates that overlap. The pinSpacing will push it down initially, of course. 
• You'll probably want to set a bigger "end" value so that it takes longer for the animation to occur. I used "+=1000" but you can use whatever you want. 

There are other ways you could do it too. Like by setting up all your panels with position: absolute and do the entire animation in one timeline, including the overlapping one coming in at the end. The easiest way to do that is to literally ignore ScrollTrigger initially - just build your animation of the panels first. Get that looking good, and THEN hook it up to a ScrollTrigger to bolt it to the scroll position. 

 

I hope that helps!

[Mo5]

Thank you so much for the detailed explanation!