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.

Share this post

Link to post
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

Share this post

Link to post
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! :)

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.