help Need help for editing horizontalLoop() to become non-loop

[kenstephoang]

Hi everyone,

 

I can understand how horizontalLoop function works and applied it to my project, but it's hard for me now to change it into a non-loop with these behaviors:

• When we drag the divs beyond the edges, we will add some resistance so that drag will become harder
• When we release the mouse while dragging beyond the edges, the divs will return to their positions

So can anyone help me change the horizontalLoop function or should I use another function with a different approach?

 

Thank you!

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen.

[Cassie]

This sounds like a completely different challenge to me! Why don't you give it a go starting from scratch with Draggable.

It sounds like you're looking for bounds and inertia plugins "throwResistance"

 

https://gsap.com/docs/v3/Plugins/Draggable/#inertia

[kenstephoang]

It's not about the "throwResistance" because it's applied while dragging beyond the edges. But I think first we need to change it to non-loop. To archive that I think I need to edit the function populateTimeline(), I just found gsap 1 week ago, I keep trying but still hard for me now

[Rodrigo]

Hi,

 

Maybe these demos can help getting started:

See the Pen bGJpOoQ by GreenSock (@GreenSock) on CodePen.

 

See the Pen ZEdoGOx by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[kenstephoang]

5 hours ago, Rodrigo said:

Hi,

 

Maybe these demos can help getting started:

 

 

 

 

 

 

Hopefully this helps

Happy Tweening!

Follow these & others' basic examples and I can create a non-loop carousel of my own with a simple approach