ScrollTrigger snap duration remaining animation duration

[OliverHH]

Hello,

 

I'm creating a scroll animation with snapping.

 

Is it possible to set the snap duration based on the remaining animation duration on the timeline?

 

Between Step1 and Step2 I want the snap duration to be max 10; between Step2 and Step3 I want the snap duration to be max 3; between Step3 and end I want the snap duration to be max 6.

Is that possible?

 

In my test above, the duration is always round about 2000ms.

 

Thanks

Oliver

See the Pen vYMVEgd by wbkejfbeqkj (@wbkejfbeqkj) on CodePen

[Rodrigo]

Hi @OliverHH and welcome to the GSAP Forums!

 

I'm afraid that is not possible, at least not in a simple way. Maybe there is a way to achieve that with enough custom logic but is beyond the scope of the help we provide in these free forums.

 

ScrollTrigger does provides a duration option for the snap configuration that gives you the possibility to either set a fixed duration of the snapping or set a min and max durations:

duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.

 

Something like this:

snap: {
  duration: {
    min: 0.5,
    max: 1,
  }
}

But those values can't be altered as the ScrollTrigger instance is snapping though.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yes, @Rodrigo is correct about that not being a built-in feature but you could probably get that functionality with enough custom code. For example, set up a listener for the "scrollEnd" event, and then create a gsap.to(...{ scrollTo }) tween that's however long you want, and apply your snapping logic inside the handler to calculate the scroll position. Just an idea. Good luck!

[OliverHH]

Thank you for your answers. Thanks for the idea, that's a good solution. Possibility I will try that.