Jump to content
Search Community

Plot elements and / or draw along a bezier path

BloodyLyons test
Moderator Tag

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

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



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:



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

   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

  • 1 month later...

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...


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!




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:




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:




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



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...
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...