TimelineMax: Getting a Handle on Bézier Tweening

Plugins for GSAP are great when you need advanced capabilities. The BezierPlugin I’ll be explaining in this tutorial helps animate virtually any property (or properties) along a curved bezier path defined as an array of points/values. Before jumping in we should take a moment to learn what a bezier curve is and where it came from.

Bézier Curves

Back during those primitive times of hand drawing, graphic designers were extremely familiar with tools called “french curves.” These oddly shaped pieces (typically thin plastic) helped guide designers in the creation of elegant curves, much like we see accomplished today with the pen tool in Illustrator.

Primitive hand tool called the french curve used by many graphic designers and typographers (src: Wikipedia)

These complicated paths we call “Bézier Curves”. In the digital world they’re expressed as a series of points, mathematically computed in order to bend lines into elegant and ornate shapes. More specifically, a Bézier Curve is used to model smooth curves using a series of plotted points that are connected together by a path.

Bézier Curves were widely publicized in 1962 by French engineer Pierre Bézier, who used these ornate paths to design automobile bodies at Renault. The initial study of the Bézier Curve was however first developed in 1959 by mathematician Paul de Casteljau using the de Casteljau’s algorithm, a numerically stable method to evaluate Bézier curves, at Citroën. Vector illustrators owe a lot to the automotive industry!

For the insanely curious, here’s a great explanation of Bézier Curves called Cubic Bézier Curves – Under the Hood explaining in finer detail how the curve is born conceptually in terms of mathematical and visual principles. Read the full article on Tuts+

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2015/05/21