Jump to content
GreenSock

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

Plot elements and / or draw along a bezier path

Recommended Posts

Hi guys,

 

Does anybody know if it is possible to plot html elements to follow a bezier curve / path?

I'd like some small shapes to animate along a path as though it is being drawn.

 

I could write out the HTML and CSS for all the shapes and timeline them in to view but there will be 100's of the buggers and I'd like to do it a quicker and more elegant using GSAP if possible.

 

Any help would be great

cheers

 

See the Pen QwMQpb by iamhareesh (@iamhareesh) on CodePen

Link to comment
Share on other sites

If I understand your question correctly, yes, that's exactly what the BezierPlugin was created for. GSAP is very good at tweening along Bezier curves and will even use a proprietary algorithm to plot a smooth Bezier through any set of values you provide! Or you can feed in cubic or quadratic Bezier data (anchors and control points) and it'll use those. VERY flexible once you understand the API. 

 

See the docs here:

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

 

You can see an interactive example in the Plugin Explorer halfway down the page on http://www.greensock.com/v12/ - it's built in Flash there, but the JS plugin is identical functionality-wise and API-wise. 

 

Is that what you were looking for? 

Link to comment
Share on other sites

Sure, it's actually easier than you might think. I whipped together a codepen for you: 

 

See the Pen 297827d7dd99d0eb44f96b6b75328338 by GreenSock (@GreenSock) on CodePen

 

It was kinda fun. 

 

Here's the basic code (but check out the codepen - it makes more sense in context)

 

$(window).ready(function() {
  var quantity = 30, //number of dots
   duration = 3,  //duration (in seconds)
   path = [{x:0, y:0}, {x:50, y:100}, {x:300, y:20}, {x:400, y:200}, {x:500, y:0}], //points on the path (BezierPlugin will plot a Bezier through these). Adjust however you please.
   position = {x:path[0].x, y:path[0].y}, //tracks the current position, so we set it initially to the first node in the path. It's the target of the tween.
   tween = TweenMax.to(position, quantity, {bezier:path, ease:Linear.easeNone}), //this does all the work of figuring out the positions over time.
   tl = new TimelineMax({repeat:-1, yoyo:true}), //we'll use a TimelineMax to schedule things. You can then have total control of playback. pause(), resume(), reverse(), whatever.
   i, dot;  

   //we can remove the first point on the path because the position is already there and we want to draw the Bezier from there through the other points
  path.shift();  

   for (i = 0; i < quantity; i++) {
     tween.time(i); //jumps to the appropriate time in the tween, causing position.x and position.y to be updated accordingly.
     dot = $("<div />", {id:"dot"+i}).addClass("dot").css({left:position.x+"px", top:position.y+"px"}).appendTo("body"); //create a new dot, add the .dot class, set the position, and add it to the body.
     tl.set(dot, {visibility:"visible"}, i * (duration / quantity)); //toggle the visibility on at the appropriate time.
  }
});

 

Is that what you were looking for?

  • Like 5
Link to comment
Share on other sites

Jack! That is sweeeeeeet!

 

Thanks for taking the time to do that and comment it up for me, I appreciate it!

Link to comment
Share on other sites

  • 1 month later...

Lets say the elements are squares instead of dots. Would it be possible to have them rotate according to the bezier curve?

Link to comment
Share on other sites

Hi Aderon, and welcome to the GreenSock forums.

 

 

Lets say the elements are squares instead of dots. Would it be possible to have them rotate according to the bezier curve?

 

Yes, autoRotate to the rescue. I forked Jack's example and modified the code:

 

See the Pen 6d46b84c5bf44dfe62756554dd16f9aa by GreenSock (@GreenSock) on CodePen

 

Comments prepended with "//** updated" denote changes. 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hi,

Thanks for the amazing set of tools Greensock!

 

I'm also trying to do this, but I would like to draw along a quadratic bezier curve (I need it to be circular).

 

I found these:

 

Circular Bezier

See the Pen kjmDo by rhernando (@rhernando) on CodePen

 

Progressively reveal dots on Bezier curve

See the Pen 297827d7dd99d0eb44f96b6b75328338?editors=001 by GreenSock (@GreenSock) on CodePen

 

 

I forked the last one and adjusted to use a quadratic bezier, however the points cannot be plotted because position.x and position.y is NaN.

See the Pen dBarw?editors=001 by ticktockreed (@ticktockreed) on CodePen

 

Do you know how to access the current point values on a quadratic bezier?

 

Most grateful of any help!

 

Thanks,

Tim

Link to comment
Share on other sites

Hi Tim and welcome to the GreenSock forums.

 

The issue is that quadratic beziers need three values for each point, the coordinates and a control point. The array you're feeding to the plugin has only two values so the plugin is missing one. In order to learn a little more about it check this:

 

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_curves

 

What I would suggest is to use a simple bezier with a curviness of 1.5. As you can see in the circular bezier codepen, it works pretty well compared with a quadratic bezier.

 

Finally there are some issues with the math you're using to determinate the circle points, take a look at this in order to now how to get them:

 

http://www.mathsisfun.com/algebra/circle-equations.html

 

But you could simplify it by feeding just 4 points to the bezier plugin like in the circular bezier codepen.

 

Rodrigo.

Link to comment
Share on other sites

Hi Tim,

 

Perhaps this simpler approach could help a little:

 

See the Pen jchIf by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Wow thanks for the speedy response Rodrigo!

 

I only just saw your reply - I had notifications turned off.

 

I came to the conclusion that I was barking up the wrong tree with this method and have settled for an SVG with stroke-dasharray to achieve the result.

 

Thanks for your help though - very much appreciated!

Link to comment
Share on other sites

  • 8 months later...

hi, i want to draw a perfect arc as shown in the pic .i tried some code in code pen but its not make a perfect curve.And i dont want to use svg. 

See the Pen QwMQpb by iamhareesh (@iamhareesh) on CodePen

 

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×