Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animation circle to square using tweenmax

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi @Kutomba,


Welcome to the GreenSock Forum.


Here an example 

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



Happy tweening ...




  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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,   

Link to comment
Share on other sites

  • 2 years later...

Hey I am very new to svg and I am trying to do the same thing(reversed) but I can't understand how the #rect is being morphed to with a visibility: hidden, or don't understand where in your code your have dealt with this.

Link to comment
Share on other sites

please watch the MorphSVG getting started video here: 


It's a touch dated, but explains the basics of setting up a morph animation. the end shape that you are morphing too most often is just used for the path data, there is no need to see it while the animation is happening. the video covers this.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.