Animating items flying from single point to each their own position

[weinde]

Hello, I am quite new to GSAP and it's my first time making a bit more complex animation... Well at least I think it is a complex animation 😅

 

So what I'm trying to create is an animation that on page load my items would animate from the backpack on top of container so going from opacity 0 and a same fixed position to full visibility and to their own position on grid... for better understanding of what I'm trying to achieve here is an image of the layout after the animation would be finished:

so Imagine the items "fly out" of the backpack at top...

 

here is what I managed to achieve so far but I cant make them fly out from a single point..

CodePen

See the Pen abaRywb by Weindorfer (@Weindorfer) on CodePen

[Cassie]

Seems like this would be a great use-case for Flip plugin!

 

See the Pen rNZqpGE?editors=0110 by GreenSock (@GreenSock) on CodePen

 

 

[weinde]

24 minutes ago, Cassie said:

Seems like this would be a great use-case for Flip plugin!

 

 

 

 

 

I will try to implement this thing in the morning and let you know! based on your demo it looks exactly what I'm looking for