Jump to content
Search Community

Infinite slider not working after resize

nicolaseielll test
Moderator Tag

Recommended Posts

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??

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

  • 2 weeks later...

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!

Link to comment
Share on other sites

  • 3 weeks later...
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. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...