Position of elements after Motion Path

[Franco95]

Hi there! I have this bubbles with an animation following a path, that is working great but when the animation is finished the bubbles stops all in the same place and then align in a grid structure. I want them to align one by one and not to stop. 

Is this possible? Maybe I took the wrong approach for this.

 

Thank you very much in advance! I am struggling with this for days.

See the Pen wvRNaER by francobuceta (@francobuceta) on CodePen

[GreenSock]

I think the simplest way is to just do the staggering yourself: 

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

 

Is that what you wanted? 

[Franco95]

Yes!! That was excelent! Thank you very much.

Now, if I don´t want to the first animation stop at all, is that possible? I mean, that the bubble follow it´s path all the way to it´s place in the grid structure without stopping (the grid structure needs to be below of the end of the first animation but I could't resolve it yet).

I was thinking in an unique path for each bubble but maybe it´s not the correct way.

[GreenSock]

The "stopping" is probably just an illusion due to the easing. Here's a version that has ease: "none":

See the Pen XWoOdxd?editors=1010 by GreenSock (@GreenSock) on CodePen

 

There are a lot of ways you could do this. A custom path is one option. 

[Franco95]

You're awesome! That was exactly was I wanted to achieve.

 

I'm new using gsap animations so I'm trying to understand it little by little.