Jump to content
Search Community

How to avoid scrolling gap between ScrollTrigger?

sagexiang test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

<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".

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...