Scrolltrigger Snap Not Working as Expected with Animations

Boom123Bam · June 11, 2023

expected behaviour (without animations)

See the Pen JjedyXo?editors=0010 by progamerr (@progamerr) on CodePen

Hello all,

I am trying to make scrolltriger snap to the nearest section, but also have an animated sidebar which also uses scrolltrigger with pin.

The issue is that it when the animations are added, it snaps to the bottom of the second element rather than the third one, and once the user scrolls past the second element, the scroll snapping stops. I can't figure out why...

Thanks for your help!

See the Pen gOQpmNj?editors=0010 by progamerr (@progamerr) on CodePen

Cassie · June 11, 2023

Heya!

So the snap points are different once you've added pinning. The duration that you are 'on' the first panel is shorter as it pins immediately on load whereas the others need to be scrolled to and then pinned.

I like using snap arrays, you can log the progress value in an onUpdate callback and then build out an array that's specific to your use case with those points.

See the Pen GRwJOmJ?editors=1111 by GreenSock (@GreenSock) on CodePen

Some other notes.

- always include a trigger in your scrolltriggers or it defaults to body, this was causing issues in your previous pen

- use markers to check where the start and end points are, if you'd done that you would have seen they were off (because the trigger container was incorrect)
- with ScrollSmoother the scrollSmoother.create call always needs to be before your scrolltriggers, first in the code file.

- ScrollSmoother-wise you also need to define a content container, or minimum requirement, you can just add a container with an id of smooth-wrapper.

like so -

<body>
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
</body>

Hope this helps!

Boom123Bam · June 12, 2023

Wow, thank you Cassie! That really helps!

One more question: Why does it break again when I add the ScrollSmoother (uncomment the first part of your code)? The "end-container" marker moves from the bottom of ".three" (where it's supposed to be) to the bottom of ".two".

Thank you again!

GreenSock · June 12, 2023

On 6/11/2023 at 8:36 PM, Boom123Bam said:

Why does it break again when I add the ScrollSmoother (uncomment the first part of your code)? The "end-container" marker moves from the bottom of ".three" (where it's supposed to be) to the bottom of ".two".

That's actually because ScrollSmoother needs ScrollTriggers to be sorted and by default the sorting will happen based on where the trigger element is in the DOM vertically. So your final ScrollTrigger is set on the container...but in the DOM that's actually first. It's a rare edge case where you just need to help ScrollTrigger know that your last one should have the lowest priority even though the DOM element is first - set refreshPriority: -1 (or some negative number...as long as it's less than the other ones so that it comes last). OR you can just set end: "max" instead of "bottom bottom".

The problem is that you're doing pinning inside that container which creates pinSpacing which stretches it bigger and bigger for each element that's getting pinned with pin spacing. That's why it's gonna run its logic last for calculating when its bottom hits the bottom of the viewport.

You don't need to understand any of what I just explained - the simple fix is to EITHER set end: "max" on that last ScrollTrigger -OR- set refreshPriority: -1

Boom123Bam · June 12, 2023

Perfect! Thank you Jack, you two have made my day!🧡

Notifications

Messages

Scrolltrigger Snap Not Working as Expected with Animations

Recommended Posts

Boom123Bam

Link to comment

Share on other sites

Cassie

Link to comment

Share on other sites

Boom123Bam

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Boom123Bam

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members