7 hidden gems of the GreenSock Animation Platform
Carl Schooff reveals some often-overlooked features of the GreenSock
Animation Platform that may open a whole new world of possibilities
As GreenSock’s geek ambassador I spend my days helping users tackle their animation challenges in our support forums and through in-person training. I love seeing animators reach those A-ha! moments when they discover a GSAP feature that solves a common obstacle. The following gems usually take beginners a while to stumble into, but once mastered, can revolutionise their animation workflow.
If you’re not familiar with the basics of GSAP, Sara Soueidan has written a great guide. You should also definitely watch GreenSock’s Getting Started video.
1. Tween a tween! Huh?
This gem is a little mind-bending but bear with me — it’s worth it. At its core, GSAP simply animates the numeric properties of JavaScript objects. Yeah, that sounds pretty boring but it’s the secret behind the flexibility of the entire platform.
Most GSAP animations apply those numeric values to CSS properties like opacity, transform, width, height, and so on. To move an object along the X-axis (left to right):
var myTween = TweenLite.to(“.logo”, 10, {x:500});However, what most folks overlook is the fact that the tween ( “myTween” in this example) is a JavaScript object itself, and as a result has various properties and methods that can be tweened. For every animation created by GSAP, whether it be a single tween or a timeline (a collection of tweens), there are methods for getting and setting different properties.
For example, the timeScale() method gets or sets the playback speed of an animation where 1 equals normal speed (the default), 0.5 is half speed, 2
is double speed, and so on.
// returns the current timeScale
myTween.timeScale()
// sets the timeScale to 2 (plays twice as fast)
myTween.timeScale(2)Instead of setting the timeScale() to a specific value, which would cause an abrupt change in speed, you can tween the timeScale() of the tween for supersmooth acceleration or deceleration.
//accelerate to 4x normal speed over the course of 2 seconds
TweenLite.to(myTween, 2, {timeScale:4, ease:Power4.easeIn);Note that when tweening a tween you can provide any ease you want for even more control, as shown above. Demos for tweening timeScale(), progress() and all the other gems listed here can be found at greensock.com/gems.
that can be controlled with exportRoot()
2. Random access runtime controls
Every GSAP animation, whether it be a single tween or a timeline with 1,200 tweens, can be controlled using handy methods like play(), pause(), reverse(), and so on. This means that during runtime (while your animation is playing) the user can interact with a simple UI and have total control over playback. One convenient feature that is often overlooked is that some of these methods accept parameters that allow you to jump to a particular
point in an animation.
Below are multiple uses of the play() method to illustrate this flexibility:
// plays the animation forward from current time
timeline.play();
// jumps 3 seconds into the animation and plays from there
timeline.play(3);
// jumps to the “section2” label and plays from there
timeline.play(“section2”);Imagine you have a 45-second animation and you only want to test the last five seconds? No problem, just use a negative value:
// jumps 5 seconds from end of timeline and plays from there.
timeline.play(-5);No need to keep watching the first 40 seconds of the animation over and over each time you preview.
This alone can save you tons of time (and your sanity) during production.
Just like play(), the reverse() method can jump anywhere. A little bonus tip that not many people know about:
// jump to end of timeline and reverse from there.
timeline.reverse(0)One of the coolest implementations of GSAP’s random access abilities is using a scrubber UI to control the progress() of an animation. An HTML5
range slider works great for this.
var tl = new TimelineLite({paused:true});tl.from(“#hero”, 0.5, {scale:0.2, opacity:0})
.from(“#greensock”, 0.5, {yPercent:115, ease:Back.easeOut});function update(){
tl.progress(progressSlider.value); // change the timeline’s
progress based on the slider’s value
}progressSlider.addEventListener("input", update);
This type of precise control makes it super-easy to get to any part of an animation and study it repeatedly, as fast or slow as you want.
hours of development time
3. Drag and spin
GreenSock’s Draggable was originally built to show off some advanced momentum-based animation capabilities of ThrowPropsPlugin, such as flicking elements around a screen and making them naturally drift to a stop within boundaries. However, it turned into much more than that.
At its most basic, it makes interactive dragging or spinning any DOM element crazy simple, even when you’re dealing with SVGs.
// allow dragging along x and y axis (using transforms)
Draggable.create(“#myDiv”, {type:”x,y”);
// confine movement only along x axis inside an element with
id of stage
Draggable.create(“#myDiv”, {type:”x” bounds:”#stage”});
// spin
Draggable.create(“#myDiv”, {type:”rotation”});Draggable has some advanced features:
● getDirection() — Find out which direction the element is being dragged
● autoScroll — Dragging an element close to the edge of its container causes it to smoothly scroll at a speed based on its proximity to the edge
● hitTest() — Find out when the element overlaps another element by a certain percentage
● liveSnap — Snap to sets of coordinates while dragging
● throw — Integrated with ThrowPropsPlugin, this creates natural, momentum-based physics after being released (flicking)
One of Draggable’s most exciting features is that it even works on elements with nested transforms. You can drag an element that’s inside a rotated
container, for example.
Draggable is one of GSAP’s most unique tools, but few people know about it — probably because dragging is not always associated with animation. It is completely integrated with GSAP’s animation core for ultra-high performance and consistency.
4. Expressive Eases
Think of easing like the style of a movement. It has a tremendous effect on how your animations feel to the audience. Do you want things to glide to a stop or bounce? Or accelerate in and out, jerk around, or act like a rubber band?
Your easing choice can make the difference between a robotic, lifeless animation and a mindblowingly realistic one. In addition to all the standard eases that are widely available, GSAP offers several customisable eases that have been crafted to serve very specific needs.
RoughEase takes a smooth ease curve and adds deviations to produce a very jagged or rough curve. It can be configured to deliver wildly erratic and random jolts, or consistent back and forth motions. It is perfect for shake and flicker effects.
SteppedEase provides an easy way to define the specific number of steps a transition should take. The easing curve literally looks like steps. For example, if x is 0 and you want to tween it to 100 with five steps (20, 40, 60, 80, and 100) over the course of two seconds, you’d do:
TweenLite.to(obj, 2, {x:100, ease:SteppedEase.config(5)});SteppedEase is extremely useful for sprite sheet animations as it allows images to be offset by specific intervals over any length of time.
SlowMo makes it simple to achieve a slowmotion effect. It combines three eases into one, starting fast, decelerating (easeOut) to a constant rate (Linear) and then accelerating (easeIn) at the end. You can configure how long the animation should stay linear and how strong the eases at the beginning and end should be. It’s perfect for text effects that you want to shoot in quickly, linger and then accelerate out.
In addition to the demo for these eases, be sure to experiment with every ease in our Ease Visualizer.
expressive eases
5. Render anywhere
A common misperception is that GSAP is just for animating DOM elements or SVG. Not true. It can animate almost any property of any object (<canvas> animations, attributes, CSS rules, or even generic JavaScript objects, all using exactly the same syntax).
Want to use a 2D WebGL renderer like Pixi.js or go 3D with three.js? No problem. Below is some code for animating three circles rendered by DOM, WebGL (Pixi) and SVG:
//identical syntax regardless of where things are rendered
TweenMax.to(PIXICircle.position, 2, {y:250t});
TweenMax.to(“#DOMCircle”, 2, {y:250});
TweenMax.to(“#SVGCircle”, 2, {y:250});When you invest time to learn GSAP, you’ll be amazed at how this knowledge can be transferred to a wide range of projects. GSAP even works great with Adobe Animate CC.
6. Take control of GSAP animations
Imagine a web page, app or game with a bunch of animations running that you need to pause all at once when the user clicks a button. With GSAP it’s easy. TimelineLite has an exportRoot() method that gathers all active animations and wraps them in a single timeline that you can control.
By applying what you learned in the first gem, you could even tween the timeScale() of that timeline and put your whole game (missiles, enemy movements, explosions) into slow-motion with just two lines of code:
// place all active animations in one timeline
var tl = TimelineLite.exportRoot();
// slow down all animations to quarter-speed over the course
of 1 second
TweenLite.to(tl, 1, {timeScale:0.25});To see a practical implementation of this technique, visit www.greensock.com and notice the animation up at the top, then click on the green ‘Download GSAP’ button. The animation pauses when the overlay opens and then resumes when it closes. The code that is run when the overlay opens has no idea of the names of the animations that are running or how many there are, it just grabs them all with exportRoot().
7. Advanced SVG shape morphing
Want to morph a circle into a hippo into a star and then into an elephant? No problem. We need just three lines of code:
tl.to(circle, 1, {morphSVG:”#hippo”}, “+=1”)
.to(circle, 1, {morphSVG:”#star”}, “+=1”)
.to(circle, 1, {morphSVG:”#elephant”}, “+=1”);Now that MorphSVGPlugin has arrived, it has never been easier to animate SVG <path> data. The huge advantage over SMIL and other libraries is that it does not require the start and end paths to have the same number of points; MorphSVGPlugin intelligently subdivides the paths and adds points where necessary so you get the smoothest results.
MorphSVGPlugin is available to Club GreenSock members, which is the main source of funding for GSAP’s ongoing development and support. Members get access to premium plugins that solve very unique challenges and integrate seamlessly into the rest of the platform. All Club GreenSock bonus plugins are available free for testing on codepen.io. You can fork the hippo demo, drop in your own SVG and experiment as much as you like.
CONCLUSION
Now these hidden GSAP gems have been revealed it’s time to release their true power in your projects. Explore the demos, grab the code and have fun pushing your animations to the limits. If you need any help, just swing by the GreenSock forums; I’ll be there.
Carl Schooff is GreenSock’s geek ambassador. With an uncanny ability to simplify complex concepts and teach them in practical, easy-to-understand ways, Carl keeps his finger on the pulse of the community and helps them make the best use of GreenSock tools.
This article originally appeared in issue 280 of net magazine
