Mounting logo with MotionPath

[Alexandre Araujo]

Hello everybody!

 

I created this code to be used to assemble a logo, piece by piece.

The movement is basically this, the pieces come diagonally and come together in the center.
It's working as it should, but I found the code, both html and javascript, a little dirty, too extensive. Would anyone have a different idea to achieve this result, perhaps using something other than MotionPath?
I know it could be done with CSS Motion Path only, but from what I've read there are still browser restrictions.
I appreciate the help

Thanks!

See the Pen QWPKegm by xando_arau (@xando_arau) on CodePen

Edited March 15 by Alexandre Araujo
New DEMO url

[mvaneijgen]

Hi @Alexandre Araujo

 

Are you sure you've shared the correct URL to the pen? Keep in mind we don't have the resources to provide free general consulting on these forums. And personally I'm of the opinion if it works it works, so don't sweat it, you'll probably find that next year you would write it totally different, but that is experience and that can only come with time. 

 

Hope it helps and happy tweening! 

[Alexandre Araujo]

.I'm sorry, I needed to do something in the example to save what I wrote. I am checking.

[Rodrigo]

Why not use a from instance, flexbox and be done with it?:

See the Pen YzMpKea by GreenSock (@GreenSock) on CodePen

 

IMHO the simpler the better.

 

Hopefully this helps.

Happy Tweening!

[Alexandre Araujo]

Hi, mvaneijgen.

 

I appreciate it and I don't disagree with your way of thinking, evolution really comes with time. But I thought a second opinion would help with this evolution and I see no reason to postpone the beginning of this evolution

[Alexandre Araujo]

Hi, Rodrigo.
Without a doubt much simpler. I'll look into it, thank you very much.