How to avoid scrolling gap between ScrollTrigger?

[sagexiang 1 Likes (Newbie)]

If a web page has many ScrollTrigger animations, each trigger is fixed to the top of the window when animating, how to avoid the scroll gap between ScrollTrigger?  I want the next ScrollTrigger animation to be executed as soon as the previous ScrollTrigger animation ends, And the next ScrollTrigger is not visible when the previous ScrollTrigger is not ends.

See the Pen XWyWEGr by Sage-Xiang (@Sage-Xiang) on CodePen

[sagexiang 1 Likes (Newbie)]

 defaults: {
    ease: "none"
  }

Is it necessary?

[sagexiang 1 Likes (Newbie)]

gap means between previous end and next start.

[mvaneijgen 2,519 Likes (Superhero)]

As stated in your previous topic with the same question pinSpacing: false, is what you could use. From the ScrollTrigger docs check for more info and check the video explaining it

 

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. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

Hope it helps and happy tweening! 

 

 

See the Pen ZEmEMKG?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[sagexiang 1 Likes (Newbie)]

Thank you so much! But the overall height of the page has doubled, what is the reason for this?

[sagexiang 1 Likes (Newbie)]

How to deal with ScrollTrigger overlap? What is the best way?

[mvaneijgen 2,519 Likes (Superhero)]

8 hours ago, sagexiang said:

Thank you so much! But the overall height of the page has doubled, what is the reason for this?

I've just added a scroll container to the bottom of the html to have enough room to scroll all the way down. <section style="height:500vh"></section>

 

8 hours ago, sagexiang said:

How to deal with ScrollTrigger overlap? What is the best way?

You could set the end trigger to something like end: `bottom-=${theHeightOfYourElements} top`, where you probably want to get the height of the elements dynamically. This will make it that the pin stops working as the height of the elements is the only space left and then they will scroll out of screen normally. 

 

Here is a quick example with the height set to 225px and only for the first block. Hope it helps and happy tweening! 

 

See the Pen Jjeodqw?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[sagexiang 1 Likes (Newbie)]

Thank you! How to show the box when it is triggered?

[mvaneijgen 2,519 Likes (Superhero)]

What have you tried your self? Please fork the pen, edit what you think is right and post it back here. We love teaching people use the GSAP tools and if we can see the code you think is right we can better help you.

[sagexiang 1 Likes (Newbie)]

<section class="block">
  <b>1</b><strong>A</strong>
</section>
<section class="block2">
  <b>2</b><strong>B</strong>
</section>
<section class="block3">
  <b>3</b><strong>C</strong>
</section>

 

I want show the "section" when it is triggered,  For example : "display:block".

[mvaneijgen 2,519 Likes (Superhero)]

Do you have a minimal demo of this (a codepen) of what you've tried already? 

[sagexiang 1 Likes (Newbie)]

Is this the best way to resolve block overlaps? ? By adding 【toggleClass: "active"】【.block{visibility: hidden;}】【.active {visibility: visible;}】

See the Pen XWyWEGr by Sage-Xiang (@Sage-Xiang) on CodePen

[Cassie 5,658 Likes (Superhero)]

I don't know what you mean by 'best way' I'm afraid, if it works for you then it looks fine to me! There aren't really best ways, just different solutions for different use cases.

[sagexiang 1 Likes (Newbie)]

7 hours ago, Cassie said:

I don't know what you mean by 'best way' I'm afraid, if it works for you then it looks fine to me! There aren't really best ways, just different solutions for different use cases.

Thank you so much! I mean is there a better, simpler and more efficient way for this requirement?

[Rodrigo 5,909 Likes (Superhero)]

Hi,

 

The code you already have in place is quite simple and easy to follow actually, so I don't think it can be better. Maybe use a loop but that could complicate things a bit further. Since you only have 3 sections there is no harm in have a bit of redundancy there, especially with that amount of code.

 

Happy Tweening!