Emilek1337 Posted August 19, 2020 Share Posted August 19, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 19, 2020 Share Posted August 19, 2020 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? Link to comment Share on other sites More sharing options...
Emilek1337 Posted August 20, 2020 Author Share Posted August 20, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now