Animate between dynamically created items

[VoicesFromTheFuselage 0 Likes (Newbie)]

Hello guys. First of all i would like to thank this whole community , the way you help people is just...well its rare to see nowadays, especially after you are left to bleed on your own on stackoverflow

Im trying to recreate this dribbble shot: https://dribbble.com/shots/14037848-Docket-note-Side-menu

I guess i could manage the part where he presses + and those circles fall down in staggers(SASS filters i guess?). But that transition from circle to the appended note seems impossible to me. There is my weak attempt made with vanilla js in the pinned codepen. Since transform-translate doesnt affect the document flow, i have no idea how to come up with something clean. I could not make it work with GSAP. If someone   guides me with tips or directions, i`d be very happy 

See the Pen MWJLpbB by ElectrifiedWithin (@ElectrifiedWithin) on CodePen

[VoicesFromTheFuselage 0 Likes (Newbie)]

See the Pen MWJLEQY by ElectrifiedWithin (@ElectrifiedWithin) on CodePen

[OSUblake 18,475 Likes (Superhero)]

The FlipPlugin might be a good place to start with moving elements.

https://greensock.com/docs/v3/Plugins/Flip

 

[VoicesFromTheFuselage 0 Likes (Newbie)]

Thanks OSUblake, seems like ive targeted the pie i cannot bite

[OSUblake 18,475 Likes (Superhero)]

19 hours ago, VoicesFromTheFuselage said:

Thanks OSUblake, seems like ive targeted the pie i cannot bite

 

How far did you get? That's a super complicated animation, and needs to be broken down into pieces. That's why I would recommend starting with the FLIP part.

 

[VoicesFromTheFuselage 0 Likes (Newbie)]

@OSUblake thank you for the response  Im  guess my knowledge of  the tools is lacking, you mind if i come back in here with a question if i find something ?

[OSUblake 18,475 Likes (Superhero)]

That's what we're here for 😉