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 as we see them digitally. Example above taken from Illustrator’s Pen Tool: The Comprehensive Guide
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.
Bézier Types
Becoming one with the Bézier makes great Jedi you, but only a true Bézier Jedi understands the various types and flavors Bézier Curves come in. The most common curves are typically Quadratic and Cubic as you’ll see in the majority of use cases.
 Linear Bézier : Straight line with two points at each end.
 Quadratic Bézier : A curve of three points.
 Cubic Bézier : A curve of four points, but the amount of points is irrelevant with Cubic so we can use five points, six points, or even seven points!
Bézier Tweening with GSAP
Before we dive into GSAP again, it’s important for you to be mindful that I’m using TweenMax for reasons previously discussed. The BezierPlugin is already packaged in for us!
French Curve
As I showed you at the beginning of our GreenSock Journey, we instantiate a timeline so we can give this animation a stage to present itself, plus a way to control each sequence.
Assuming we have the timeline setup and mechanics sorted we can examine how to write and use the BezierPlugin. Take note that our values for the Bézier paths are just a series of x and y coordinates, known as the Cartesian Coordinate System. When authoring, developers must ensure each object in the array has matching property names.
var bezier_path = [{x: value, y: value}, {x: value, y: value}]; tl.staggerTo(element, duration, { bezier: { type: 'thru', values: bezier_path, curviness: 1 }, ease: Power1.easeInOut }, stagger_value);
Let’s imagine we’ve pointed to an SVG circle, passing the selector where you see element
, then setting the duration
too. Giving x
and y
values and a curviness
of 1
will result in our SVG circle animating on a circular path like so:
Examine the source for fuller details of what makes it work.
Since thru
is the default Bézier type
, you don’t really need to define a type at all. Increasing and adjusting values like curvines
can create some really interesting paths for animations to travel upon. Using the circle we looked at above I’ve taken the liberty of adding a few more SVG circles and adjusting the curviness value (12 to be exact).
Bézier types
Here’s a rundown of the verious Bézier types accepted. If you plan to use the curviness
property (which allows you to adjust the tension on the Bézier) you must make sure to use the thru
type.

thru
(default): The plugin figures out how to draw the Bézier naturally through the supplied values using a proprietary GreenSock algorithm. 
soft
: Values provided in the array act almost like magnets that attract the curve towards them, but the Bézier doesn’t typically travel through them. 
quadratic
: Define standard Quadratic Bezier data (Quadratic Beziers have one control point between each anchor). 
cubic
: Allows you to define standard Cubic Bezier data (Cubic Béziers have two control points between each anchor). 
thruBasic
: This is the same asthru
except that it uses a less complex algorithm for the initial plotting of the Bezier through the supplied values.
Animating Other Properties
The BezierPlugin additionally allows developers to animate other properties besides the x and y cooordinates. You can actually animate other properties like transforms, opacity and much more! It’s not terribly common to do so, but it’s entirely possible. Properties like rotation, scale, and even custom examples too!
For instance, we could animate the opacity
along with x and y as I’m about to demonstrate (note each object in the array must have the opacity property to match).
var bezier = [{ x: 0, y: 0, opacity: 0 }, { x: 0, y: 42, opacity: 0 }, { x: 42, y: 42, opacity: 1 }, { x: 42, y: 0, opacity: 1 }, { x: 0, y: 0, opacity: 0 }];
Going Further
Let’s look at a few more features, for when you’re feeling confident.
autoRotate
This feature automatically rotates the target according to its position on the Bézier path.
Scrolling
If fancy is what you strive for, then be super fancy and animate an object on a Bézier path as Jan Paepke demonstrates for his ScrollMagic project. Define the curve points and supply them in your tween definition in order to animate along a defined curve.
Next Time
Stay tuned for my next adventure in this TimelineMax series where I plunge you into another GSAP plugin called Draggable. With Draggable powered timelines we’ll experiment in order to create a slide out menu where it can be dragged to open and dragged to close. See you soon animation pros!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post