tweenmax Animation circle to square using tweenmax

[Kutomba 0 Likes (Newbie)]

I have simple css animation looks like this, pen  circle to square using css I want the same animation using tween max. can someone help me to achieve this??

 

 

See the Pen JVRYqm by makumba (@makumba) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi @Kutomba,

 

Welcome to the GreenSock Forum.

 

Here an example 

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

 

 

Happy tweening ...

Mikel

 

 

[Kutomba 0 Likes (Newbie)]

Hii @mikel 

 

Thank you for the great answer,  I am a newbie to tweenmax animation  I have a few questions

1. How to stop that infinite iteration in tweenmax? , I just want to run it  once  because the effect will appear  only after clicking some buttons,

   in css I will just remove this line to stop infinite iteration

  animation-iteration-count: infinite;

2. Lets us assume that we have two elements one is the sircle and other is square , is it possible to add that anaimation to these elements meaning starts from element1 which is sircle and finish with second element which is square? 

  <div class="circle">I am circle</div>

  <div class="square">I am square</div>

 

Any help or suggestion will be appreciated,   

[mikel 1,823 Likes (Superhero)]

Hi @Kutomba,

 

Without repeat:  

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

 

Sure you can morph greensock/morphSVG if you have SVGs.

 

Here an example: 

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

 

 

Happy tweening ...

Mikel