seamlessLoop helper: smooth transition from throw to roll

[unvs]

I'm using the excellent seamlessLoop helper (https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/) which I run with `paused: false` and `repeat: -1`. I was wondering if there is a way to smoothen out the transition between when you grab and "throw" it (or just scroll it manually) and when it starts rolling by itself again? Now it comes to a complete stop, then starts rolling in its previous tempo again. I'd love if it could either ramp up from 0, or not slow down to 0, but land in the previous speed. Are any of those options possible?

 

Thanks for any advice!

See the Pen GRPbeGv by unvs (@unvs) on CodePen

[Rodrigo]

Hi,

 

I'm afraid that is not possible at the current state of the helper function. Is my understanding that it would require quite a bit of custom logic to achieve that and that is beyond the scope of the help we can provide in these free forums with the limited time we have.

 

We offer paid consulting if you want to contact us.

 

Happy Tweening!

[unvs]

7 hours ago, Rodrigo said:

Hi,

 

I'm afraid that is not possible at the current state of the helper function. Is my understanding that it would require quite a bit of custom logic to achieve that and that is beyond the scope of the help we can provide in these free forums with the limited time we have.

 

We offer paid consulting if you want to contact us.

 

Happy Tweening!

Ah, I see. I kind of expected that, since it looked like that in the helper. I'll poke around some more and see if I maybe stumble across something

[GreenSock]

Yep, like maybe you could animate the timeScale of the looping timeline. Just a thought. Good luck! 👍

[unvs]

For anyone following along, it was quite easy to do actually.

 

First I added the `onDragStart` event to the draggable which just called `tl.pause()` to stop autoplaying when we start dragging.

Then I hooked into `onThrowComplete` which was currently calling `syncIndex()`. I created my own callback (that first calls syncIndex), then:

 

gsap.set(tl, { timeScale: 0 })
tl.play()
gsap.to(tl, { timeScale: 1, ease: 'power2.in', duration: 2 })