Jump to content
Search Community

ScrollTrigger w/ Pinning causes subsequent ScrollTriggers to fire too soon

mikebikeboy test
Moderator Tag

Recommended Posts

First thanks for this awesome plugin. It's really good.

 

I have a page with a ScrollTrigger controlling a timeline animation, and it's pinned so it's adding pinSpacing to the page. Further down the page are other animations that get triggered as soon as they enter the viewport. However the pinned Scrolltrigger is adding extra height to the page but the subsequent Scrolltriggers are not taking that into account and are firing off way before they should. Any ideas?

 

In the codepen I've put some comments, you can disable the first ScrollTrigger in order to see how the second one ought to work.

 

Thanks in advance!

See the Pen VwpxYQp by mikebikeboy (@mikebikeboy) on CodePen

  • Like 1
Link to comment
Share on other sites

 

Hey @mikebikeboy

 

The problem with that technique of pinning the whole content/body to get the section above and below to still be in view while you are pinning the center one (which is what you are going for here, right?) is that all your content will be inside the pin-spacer, so the pinSpacing can not have any effect on later ScrollTriggers that refer to elements that are inside that pin-spacer, too - because, well, they are inside that pin-spacer.

 

I just recently mentioned that in a different thread.

 

 

 

So for any subsequent Scrolltriggers to the one where you use that technique you will either have to adjust the start and end dependent on the total duration of those pins with that technique before. 

 

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

 

 

 

Or what else you could do in your case is to just change your markup a bit so the wrapper doesn't include that #fade-up-slide div. 

 

<div id="wrapper">  <!-- WRAPPER -->

  <div class="spacer">Spacer</div>

  <div id="slides_container" class="slides_container">
    <div id="first-slide" class="slide">1</div>
    <div class="slide animated-slide">2</div>
    <div class="slide animated-slide">3</div>
    <div class="slide animated-slide">4</div>
    <div class="slide animated-slide">5</div>
    <div class="slide animated-slide">6</div>
  </div>

  <div class="spacer">Spacer</div>
  
</div>  <!-- WRAPPER -->

<div id="fade-up-slide" class="spacer">
  <div class="fade-up-slide-content">Fade Up Slide</div>
</div>

 

 

This way the pinspacer of your #wrapper should have the effect as you expected.

 

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

 

 

Hope this helps.

Cheers, Paul

 

 

  • Like 3
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...