Element's width animation

[Emilek1337]

Is it possible to animate element's width like on mollie's page? I'm talking about the payments "slider". I can for example move the div by xPercent 100, but they it goes completely out of the viewport, I want it to always stay in viewport and only go left and right like on mollie's page. It goes left and right till it touches the end of the div. https://www.mollie.com/en

Im talking about the animation on the screenshot

 

[ZachSaucier]

Hey Emilek1337. I'm a bit confused because those items in the page that you link to do go out of the viewport. Then they wrap around to the other side so it's an infinite loop. It's the same basic technique as this:

 

Is that what you're looking for?

[Emilek1337]

22 hours ago, ZachSaucier said:

Hey Emilek1337. I'm a bit confused because those items in the page that you link to do go out of the viewport. Then they wrap around to the other side so it's an infinite loop. It's the same basic technique as this:

 

Is that what you're looking for?

You are right, they do go out of viewport. My question was more how do I make them wrap when they are continuously moving? How do I detect that one div went out of the viewport and append it on the other site? Could  you provide an example or at least give me some hints? It would be very helpfull. I read the other topic you provided but I think it's a bit different since you are moving the block on click there.

 

[ZachSaucier]

The thread I linked to does just that. Regardless of moving on click or just animating it the technique is the same: use the modifiers plugin to detect when the value is outside of some bounds that you have. If it is, wrap it to the other side of your bounds.

 

Maybe the hover demo in that thread is more helpful to your particular use case.