Issue with pinned section getting overlapped with next section

[mariovde]

hi all,

 

I'm having trouble getting pinned sections to work.

My page will consist of 6 sections. For debugging purposes, I've created a codepen with only 3.

When the second section hits the top of the window, I want it to be pinned.

When scrolling further, the section remains pinned, each of the list items needs to get the class "active" and the corresponding block on the left side needs to fade in.

When all 3 bullets (and thus divs) have been faded in, the pinned section gets unpinned and the user scrolls further to the next section

 

I cannot get my head around how to do the separate bullet animations.

And why the last section overlaps the middle section...

 

I've looked through all examples for scrolltrigger and forum regarding overlapping, but nothing helped so far, to solve this...

any help would be appreciated!

 

Thanks!

See the Pen OJzxqXd by mariovde-iio (@mariovde-iio) on CodePen

[akapowl]

Hello @mariovde

 

Specifically set pinSpacing to true if you need pinSpacing and the parent element of the element you are pinning has flex set

 

From the docs / relevant part is bold:

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations.

 

See the Pen xxpXoBj by akapowl (@akapowl) on CodePen

 

 

Edit:

Sorry, I first missed that other part of your post;

If you want to tween on different elements in sequence, a timeline would be the best tool of choice.

 

It may also help understanding how durations/the position parameter work on tweens/timelines with a scrub applied.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

See the Pen RwxLXWX by akapowl (@akapowl) on CodePen

 

[mariovde]

Thanks for the reply! 

looks good!

When I add "once:true" to the scroll trigger, when pinSpacing:true is also set, there is a lot of margin between the sections.

any idea how to solve that?

[akapowl]

15 minutes ago, mariovde said:

When I add "once:true" to the scroll trigger, when pinSpacing:true is also set, there is a lot of margin between the sections.

any idea how to solve that?

 

The threads linked in following post should guide you the right way to resolving that

 

 

[mariovde]

Fixed it by adding code to the scrolltrigger. 👍

 

 onLeave: self => {
                    let scroll = self.scroll() - (self.end - self.start);
                    self.kill();
                    self.scroll(scroll);
                    tl.progress(1);
                },