Jump to content
Search Community

Move element permanently with tween

ktsubouchi test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi all,

 

Basically, what I'm trying to do is move an element (e.g. {x:10}) then when the animation is complete, wherever the element ends up is it's new position. Almost exactly like the solution here except that I don't want the element to be draggable.

 

(edit: add codepen)

 

Thoughts?

See the Pen KKgLBxg by ktsubouchi (@ktsubouchi) on CodePen

Link to comment
Share on other sites

I read your post a few times and I don't really understand what you're asking. I mean...if you tween to {x: 10}, for example, your element would indeed stay there. Are you saying that your element jumps back to the previous position or something? A minimal CodePen demo would be SUPER helpful, and maybe a little more description about what you're asking/wanting. We'd love to help - I just don't quite get what you're asking. 

  • Like 1
Link to comment
Share on other sites

I've added the codepen. In the codepen, I'm trying to swap the first two and then swap the last two in a circular motion like in

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

. So the blue circle will end up in the last position after two animations/tweens. 

 

I suppose it could be done with a timeline but there might be more circles and the sets of circles to be swapped will be chosen randomly.

Link to comment
Share on other sites

  • Solution

If you want the movement to be truly circular, you could create (or dynamically create) circles with radii large enough to go from one slot to every other slot. Then move the objects along the circular path. 

 

You could dynamically create paths using cubic beziers.

 

You could animate the x position with a normal ease and also do a separate yoyo tween for the y value to a given height and then back to 0.

 

There are probably some other methods that I'm not thinking of.

Link to comment
Share on other sites

Zach's ideas are all valid, and here's another option that uses a little helper function that lets you set a rotation origin via global coordinates, and it'll MOVE the element around that point (it doesn't set its rotation at all - it just moves it via x/y) and each time you alter its originX or originY, it'll reset the rotational value: 

See the Pen 10dbc8e963195e2420300eba597212fb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

So you just create a Rotator instance for each element you want to move like that, and then tween its "rotation" value. 

 

Just another option for you. I'm really not sure what exactly you're doing or which solution would fit best in your context. 

 

Happy tweening!

  • Like 2
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...