How to do this

[Eugene Mous 2 Likes (Newbie)]

Hello... I'm new  to Green Sock and have some difficulties in a project. I found an interesting example, which i want to insert in a website that i am working on. The example is html and css and i want to make it animate with a tween or timeline. Can someone help me? Thank you in advance.

 

I've put the codepen example and a file with whole code. Can you help to make the animation in example to run in reverse , i would like it to start with the parts of the image scattered and in the end combine them all together to the final image. Sorry if i didn't make my self clear. 

Code.txt

See the Pen rwRLNO by Eugene_m (@Eugene_m) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi Eugene Mous,

 

Welcome to GreenSock Forums.

 

One way to do this is:

 

See the Pen OgexzN by mikeK (@mikeK) on CodePen

 

A cool way would be to handle the scattered positions of all parts by staggerFrom and a cycle function.

Have a look to the pen at the bottom of this page: https://greensock.com/docs/TimelineLite/staggerTo()

 

Kind regards

Mikel

[Eugene Mous 2 Likes (Newbie)]

Thank you very much Mikel. With your help and suggestion i was able to implement it. Have a nice day