Jump to content
GreenSock

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

GSAP - How can I distribute circle shape around the page?

Go to solution Solved by mikel,

Recommended Posts

I have 4 circles which I need to distribute in 4 directions. If I allow position absolute, it's all mixed-up together but I need every circle side by side in the center of the page.

The problem is Gsap is a distribute circle with the transform or with the position but when if I enable position absolute then the circle is mixed up.

Is there any other way I can achieve this? 

idea-1.jpg

idea-2.jpg

See the Pen wvzjbgE by elsueno (@elsueno) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @JayShukla,

 

In your case, it could be more convenient to calculate the positions and use .from tweens

 

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

 

happy tweening ...

Mikel

  • Like 2
Link to comment
Share on other sites

Mikel's solution is great!

 

Another possible solution is to use the yet-to-be-released Flip plugin to transition between your states more dynamically. Note that it will be a Club GreenSock plugin. If you sign up for a Shockingly Green Club GreenSock membership or greater you can gain private beta access today!

  • Like 2
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.
×