Infinite slider not working after resize

[nicolaseielll]

Hey, I'm trying to create an infinite slider but I'm unable to get it working after resize. The slider works great before resizing tho.  Here's a simplified demo of the problem:

I have separated the wrappers with colors so it is easier to see whats happening.

https://codesandbox.io/s/silly-star-87kp94?file=/src/views/Home.vue:0-2690

 

I have tried to update the wrapWidth and the position directly inside the animation modifiers on resize but nothing seems to have any effect.

Keep in mind that my project uses VW as a base font-size unit so everything scales based of the screen width so that might change the dynamic of the recalculating.

Do you guys have any tips or tricks for this?😅

[Rodrigo]

Hi,

 

For these cases is better to use the all mighty Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

This example uses the helper function in Vue3:

https://stackblitz.com/edit/vitejs-vite-hyaxkd

 

Hopefully this helps.

Happy Tweening!

[nicolaseielll]

Is it possible to achieve this exact functionality with the helper function, the draggable feature with inertia would be needed in my case also + the automatic scroll:

See the Pen JjeGgyV by animaticss (@animaticss) on CodePen

The only problem with this pen is that it does not work if I use vw as the base font-size unit because the boxes are absolutely positioned. I would just have to reposition the boxes somehow without restarting the whole animation but I don't know how

[Rodrigo]

Hi,

 

Yep check this example:

See the Pen OJaGjzB by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[nicolaseielll]

Thats perfect but the scrolling stops for a while after dragging  Is there a way to ease it to the automatic scrolling speed so that it does't stop?

[Cassie]

Hey Nicolas, I'm sure there is - but it's a pretty complex demo and I'm not certain how to begin without taking a chunk of time to dive into it.

 

If I were you I'd try and tweak the initial one? It's a lot simpler and a vw problem sounds easier.

Jack understands this helper more than me and he may have some input - but it's his birthday and a weekend so I'm not gonna tag him til monday. Just wanted to let you know we'll loop back to this!

[GreenSock]

On 8/18/2023 at 10:45 AM, nicolaseielll said:

Thats perfect but the scrolling stops for a while after dragging  Is there a way to ease it to the automatic scrolling speed so that it does't stop?

No, there isn't an easy way to do that. Inertia plugin is plotting the appropriate "landing" spot so that it's perfectly on an index number and what you're asking is essentially for it to not ever land and instead have it control the playhead and slow down to match the normal speed, handing control back to the timeline itself at that speed. It's not impossible, but it's way beyond the help we can provide for free in these forums. You're welcome to contact us about paid consulting options. With enough elbow grease, it's probably doable.