Jump to content


Can I animate multiple objects towards a point?

Recommended Posts

Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object?


For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.

Link to comment
Share on other sites

Absolutely. If these objects are all placed in a determined way, then they all would have the same "to" points. If they should all be random and then meet at the same point, you can generate them then give them all the same "to" points ... or, position them all at the same point to start, and then set random "from" points.


See the Pen MppKPz by sgorneau (@sgorneau) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks Shaun, it's good to know that it is possible. I've played around with the Codepen but I'm a little unsure as to how to get it to work with my current setup.


I have them absolutely positioned to the points on the canvas I'd like them to finish at. I guess I need to somehow use "to" tweens to make the animation of them moving from outside of the canvas to their current points towards the center?


Edit: Also to be clear, I don't want them to go to the center of the canvas, I want them to move slightly towards it which is what would bring them into view on the canvas.


Thanks again Shaun! :)

Link to comment
Share on other sites

HI cbg :)


Welcome to the GreenSock forum.


I'm not 100% clear on what you're animating since you've been mentioning canvas. Is this a canvas animation? or are you just using that as a generic term for the animation action area?


If you've got the elements situated at the desired ending position, it should be pretty easy to loop through and animate them from outside of your canvas. Depending on what you're doing, you might even be able to use a stagger and cycle. It's tough to say for sure without a demo. With a from() tween, you're defining the starting positions of your elements so they'll animate to those ending positions you've manually set.




If you could create a simple demo for us, that would get you the best answers. Here's some info about that:




Hopefully that makes sense and helps.


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.