Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Emilek1337

Element's width animation

Recommended Posts

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

 

Screenshot 2020-08-19 at 09.58.36.png

Link to comment
Share on other sites

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

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

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.

  • Like 1
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.
×