Jump to content
Search Community

ScrollTrigger not adhering to the end trigger rules?

mheavers test
Moderator Tag

Recommended Posts

Hi - I think I'm either misunderstanding the scroll trigger "end" rules or structuring my html / css in a way that pinning is not working...


I want to achieve what the "layered pinning" example in this codepen does - content from one section overlays  that of another.


My scrollTrigger is set up as follows:


tl = gsap.timeline({
  // yes, we can add it to an entire timeline!
  scrollTrigger: {
    trigger: "#section-transform",
    pin: true, // pin the trigger element while active?
    start: "top top", // when the top of the trigger hits the top of the viewport
    endTrigger: "#section-brushes",
    //end: `+=${sceneConfig.transform.sceneDuration * screenDims.height}`, // end after scrolling this distance
    end: `top top`, // end after scrolling this distance
    scrub: true, // smooth scrubbing, e.g. '1' takes 1 second to "catch up" to the scrollbar. `true` is a direct 1:1 between scrollbar and anim
    //onUpdate: onScrollUpdate,

My understanding of this is that when the top of `#section-brushes` hits the top of the viewport, it will release the pinning of the previous section (`#section-transform).


the `<section>` elements are two concurrent dom elements. It actually seems like no matter what I put for the `end` value, the resulting `pin-spacer` is always the same height...




Link to comment
Share on other sites

Hey mheavers. It's kind of hard to understand exactly what's happening based on a couple of screenshots and the code. It'd be easier for us to help you if you create a minimal CodePen of the issue.

With that being said, most the time you don't need to use endTrigger. Most of the time when pinning it's good to use a container as the trigger and a sub-container/element as the element that you pin. Then you can say start: "top top" and end: "bottom bottom" or whatever you need.

  • Like 2
Link to comment
Share on other sites

Thanks @ZachSaucier - that's actually really helpful, and resolved my issue. And while it's working - I think I'm unclear then on how either scrollTrigger automagically knows, or whether I somehow got lucky, in determining when to scroll out the previous section once the following section is overlaid. For example, I just set a somewhat arbitrary "end" duration for my scenes:

end: `+=${sceneConfig.scenes.transform.sceneDuration * appState.screenDims.height}`, // end after scrolling this distance


but if I look at the DOM, I can tell see that once <section2> is pinned to the top of the screen, <section1> begins to scroll out.  But nowhere in code did I specify "wait for section2 to enter".

Link to comment
Share on other sites

@mheavers I'm not entirely clear on what you're asking, but I'll mention a few things: 

  1. Did you watch the introduction video? It covers pinning and visually shows how things work. It's definitely worth watching - I suspect it'll clear things up for you.
  2. In short, ScrollTrigger does all of its measurements according to the natural DOM flow (before any pinning or fancy stuff happens).
  3. Keep in mind that by default, ScrollTrigger will add padding to the bottom of your pinned element to push other stuff down. The amount of padding is exactly the distance between the start and end trigger positions (not that you need to worry about any of that). 
  4. Usually you don't need to do fancy calculations like end: `+=${sceneConfig.scenes.transform.sceneDuration * appState.screenDims.height}` - we worked hard to make the API very flexible so that you can just think in terms of "when that element's bottom hits the top of the viewport" or "for exactly 300px", etc. I'm not sure where you're getting that "sceneDuration" number from - it kinda smells like a ScrollMagic thing. True? 

Does that help at all? 

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