Search Community

bezier circle

Moderator Tag

Go to solution Solved by Diaco,

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

Hi

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:{
type:"cubic",
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???

cheers

marco

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

• 1
Share on other sites

I didn't look at your math, so I don't know what you did, but a circle is octagon shaped.

Here's an example using SVG. I added some extra code in there to help visualize it, but the bezierPlugin is using data from the values array.

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

• 3

Nice job, Blake!

Share on other sites

• Solution

Hi jjletho

pls try this :

```var R = 200 ;
TweenMax.to("#myObj", 5 ,{
bezier:{curviness:1.5,values:[{x:0,y:0},{x:-R/2,y:R/2},{x:0,y:R},{x:R/2,y:R/2},{x:0,y:0}]}
,ease:Power0.easeNone,repeat:-1});```

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

• 5
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

CodePen:

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

• 4
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!

jj