Prepare for Anything with GSAP

Learn how and why GreenSock became our animation pick

Feeling uncertain about how to add animation to a Web site or single page app? We’ve been in the same boat. There are plenty of CSS and JS animation frameworks available, ranging from free and easy (but limited and inflexible) to steeper learning curve, robust, can-do-almost-anything paid options. None are necessarily a “bad” choice, but you definitely don’t want to make a choice and find out later it can’t do everything you need, then have to start over with something new (losing valuable project time and developer resources, maybe even client confidence).

The decision for what animation package we would use came down to how much uncertainty could we handle. Should we go with an easy-peasy, just-add-a-class CSS animation library (e.g., Animate.css, Tachyons, Motion.css), which would likely be very limited? Learn a JS animation library (e.g., Anime.js, Velocity.js, Popmotion, Three.js), which may or may not do everything we need? Or put our trust in Greensock Animation Platform (GSAP), a pro-level library which makes big promises and may be overkill?

GSAP delivered

It was an act of trust, but not actually as risky as it looked. Most of our concerns were quickly and painlessly addressed.

• Would we see performance issues and slow, laggy animations? No, GSAP turned out to be tiny with no performance issues whatsoever and thoroughly road-tested.
• Would the library be expensive? No, GSAP is free to use even on commercial sites and paying $150/year for access to premium plug-ins was quite reasonable.
• Would we learn it fast enough? Yes, thanks to a multitude of online tutorials, forums, and contributors, GSAP was easy to pick up quickly. There's even a handy CodePen sandbox.
• If we got into trouble, could we get help? Yes. A supportive community of users answered questions and "HELP!" requests in a timely fashion.
• Would we be able to animate anything the client requested? YES! Fade in, slide up, and pop animations were a breeze to create. Even animated handwriting (i.e., the word "love" writing itself) turned out to be easy. However...

Almost perfect, but not quite

As well as GSAP performed, we still experienced some problems due to the complexity of certain animations. Specifically, one type of animation for a "section intro" was to start playing at a certain scroll trigger point, animate at the same speed the user scrolled, pin in place until the animation finished, and play only once. There would be multiple instances of this animation per page and each would have multiple timelines. Unfortunately, the GSAP commands used to accomplish each requirement (i.e., scroll trigger, scrub, pin, play once) were not meant to be used together.

• scrollTrigger is used to trigger an animation when the user has scrolled to a certain point on screen.
• toggleActions defines what happens when an element enters, exits, re-enters (i.e., on scrollup), and re-exits the trigger area (e.g., top of the element enters the center of the screen).
• scrub is used when you want to tie the animation speed to the user's scroll speed.
• pin is used to hold or "pin" an element in place until the animation finishes.
• To make an animation play only once, you could use either toggleActions: play none none none; or once: true;.

You'd think you could just put all the pieces together, but no... unfortunately,

• toggleActions does not work with scrub.
• scrub can be combined with once: true, but will leave ugly whitespace above each element, unless you kill off each scroll trigger.
• Scroll triggers can be killed off, but you have to track and kill every instance and they do not have ids by default.
• While it is possible (after jumping through a lot of hoops) to create an animation that pins in place, plays only once, and animates at the same speed the user scrolls, it will jump in iOS (an unfortunate browser bug). See v1.4 below. Hopes: dashed. Icarus falls.

Ultimately, the client made a choice between an animation that played only once with no pinning or pinned but reversed on scroll up. They chose the latter. See v1.2 below to see their final choice.

Animation permutations

Some of the options and experiments created.

v1.0 Pins and plays once, but leaves whitespace

Section intros pin, but do not unpin. Extra whitespace is left above them.

v1.1 No pinning, plays only once

Section intros do NOT pin, but play only once.

v1.2 Pins, but reverses on scrollup (all)

Section intros pin, but will rewind on scroll up.

v1.3 Pins, but reverses on scrollup (text only)

Section intros pin, but do not unpin, so the hgroup scroll trigger reverses on scrollup (instead of being killed).

v1.4 "The one" that does it all, but jumps in iOS

Section intros: background image scales on scrolldown (scrub), when it gets to the top of the screen, it pins, then it fades to black, and white text appears, then it unpins. The animation plays only once.

Epilogue

This situation was a bit like a climactic moment in an action-adventure movie. Did our heros survive the waterfall? Yes. Like James Bond hang gliding off Iguazu Falls in Moonraker, we were able to pivot, transform, and keep right on moving. GSAP, with its robust capabilities and supportive community, proved to be the right choice and well worth the investment of time and effort to learn.

Do you have a daring quest, epic project, or hairy situation in need of bold ideas and clever coding? We're great at rising to a challenge. Read our UX case studies to learn how we helped clients in similar tough situations.