Jump to content
Search Community

bezier circle

jjletho test
Moderator Tag

Go to solution Solved by Diaco,

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'm working on a loader, using bezier to draw a circle. But following math I got a straight line at the top of my path.


my tween is basically

TweenMax.to(pillole[e],5, {bezier:{
values:[{x:0, y:r},{x:-c*r, y:r}, {x:-r, y:c*r}, {x:-r, y:0},{x:-r, y:0}, {x:-r, y:-c*r}, {x:-c*r, y:-r}, {x:r, y:-r},{x:0, y:-r}, {x:c*r, y:-r}, {x:r, y:-c*r},{x:r, y:0}, {x:r, y:0}, {x:r, y:c*r}, {x:c*r, y:r}, {x:0, y:r}], autoRotate:false},repeat:1,ease:Linear.easeNone,yoyo:false});

any thought???





See the Pen RPEEMx by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi jjletho  :)


pls try this :

var R = 200 ; 
TweenMax.to("#myObj", 5 ,{

btw in this case you can have same motion with this :

var R = 200 , El = document.getElementById('myObj') ;
TweenMax.to(El, 5 ,{ transformOrigin:"50% "+(R/2+El.offsetWidth/2)+"px", rotation:360 , ease:Power0.easeNone , repeat:-1 });

See the Pen bdOJmz by MAW (@MAW) on CodePen

  • Like 5
Link to comment
Share on other sites

I like Diaco's second solution for creating circular motion. There's no point in using a Bezier if you don't need to.


I updated the my example using the ratio you are using, which is a lot more accurate.I added a real circle to test it, and it's spot on.


Ratio: 0.552284749831

Source: http://stackoverflow.com/a/27863181/2760155



See the Pen xGmMzj by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

thanks Blake and Diaco! you did a very good explaination :)


I also did a svg circle from bezier correctly but not using the same coords as a path with bezier plug-in.

Btw your solutions are brilliant and will help me very much!



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.
  • Create New...