Any developer you talk to has something they are passionate about. Some front end developers are into design, or UX. Some (crazy) backend developers get all jazzed up about databases and Javascript ES6 promises. One of my personal passions as a front end developer is animation.

See the Pen SVG scroll drawing by Andy (@andyobrien) on CodePen.

When you hear “animation” you may be thinking about elaborate illustrations that draw themselves on scroll, or complicated menu animations. Animation can also be much more simple. Changing the color of a button on hover is animation. Displaying a drop-down menu is animation. Yes, the complicated stuff is more poppy and fun, but a good front-end developer or designer also knows how to use subtle animations to improve user experience and the overall design of a site.

See the Pen Button animation demo by Kathryn Crawford (@kathryncrawford) on CodePen.

There are many different ways to animate

Depending on what you want to accomplish, your animation tools will differ wildly. For years, jQuery, a Javascript based animation library, was everyone’s go to for basic animations. jQuery has it’s own set of useful functions, like show() or expand() that are pretty hands off for animations. You simply have to set up what block you want to show() and the library does the work! It sounds pretty great, so why have people been moving away from it?

jQuery is slow, it’s not accessible or easily responsive, and as demand for more complex animation has risen, it has fallen behind. The introduction of CSS3 also played a role in making jQuery more obsolete.

See the Pen jQuery animate height: auto by Josh Parrett (@JTParrett) on CodePen.

CSS3 animation is great for simple animations

Front end developers tend to get excited about CSS3 animation. The newest version allows us to use transitions to animate properties (like color or opacity) over time. Keyframes allow us to string animations one after another. Some CSS animations can be hardware accelerated, meaning the browser can use the GPU to render them, which allows for better performance overall. They’re easily made mobile friendly, either by use of percentage based measurements, or using media queries to have specific animations for each viewport size. CSS3 is king for basic animations on a site, like changing a button color on hover, or revealing a dropdown menu.

See the Pen Overlay Css menu by Thibault D (@sacsooo) on CodePen.

Despite all the awesome things that CSS3 animation can do, there are certainly limitations as well.

CSS doesn’t provide a means to control an animation. In order to test an animation while you build it you have to watch the whole thing and then reload. There is no way to “skip to the middle” or reverse an animation in order to test it. This does limit user interaction. You cannot build an interactive GUI or game easily with CSS animation. 

Timing certainly becomes an issue with more complicated animations. For simple animations, CSS is probably your best bet, and we can use keyframes to line up several animation points. However, keyframes are limited to percentages, rather than time, in terms of duration. Issues stemming from this really add up if you ever need to get specific about timing with your animations. There simply is no way to say “I want to move this rectangle right for 2 seconds, then move it down for 1”.

CSS is limited in terms of the types of animations it can handle. There are only a few properties you can animate. Since CSS is not a true programming language, there are no functions or methods available to help trigger and control animations. With CSS you can only trigger an animation based on hover, focus or an active state. In order to trigger one based on time, mouse position, scroll position, or clicking, you will have to supplement with Javascript.

CSS animations also do not play well with SVGs or scalable vector graphics. As high resolution displays become more popular, vector graphics are becoming more important. Furthermore, they are a great solution for responsiveness since they are so small in terms of file size.

Regardless CSS animation can be a solid choice

I am not suggesting we forget CSS animation and move on though. There are definite cases where it is the best and easiest library to accomplish our goals. It’s very easy to learn, the performance is good, and it requires no outside dependencies. With SCSS or another CSS preprocessor we can make variables and mixins that make our job even easier.

We do use CSS animations pretty often here at Digital Reach for basic applications. However, we prefer to use Javascript for more complicated designs.

But which Javascript library should we use?

Greensock is my personal favorite animation library. As a front end developer I do have less opportunities to familiarize myself with more complicated Javascript. This may seem like it would be a barrier to me, but it isn’t a problem, because Greensock is not hard to use.

Why did I choose Greensock as my go-to?

GSAP (the GreenSock Animation Platform), is about 20x faster than jQuery, and even faster than CSS3 in some cases. Although it can be used in conjunction with CSS3 animation, the library actually has the ability to manipulate CSS properties in it’s functions.

GSAP also makes it easy to line up your animations into timelines. Animations can be chained together, and you can start a new one before the previous ones are finished. This, CSS3 cannot do. In addition, thanks to built in functions for pausing, reversing, seeking, etc., it is easy to make animation controls.

See the Pen Impossible with CSS: controls by GreenSock (@GreenSock) on CodePen.

GSAP also has a large variety of eases to use, in addition to being able to manipulate separate properties at the same time. Rather than basing eases the gravity-less void of the internet, also have the ability to animate things based on earth physics.

One big point in GSAP’s favor is browser compatibility. CSS3 is not compatible with IE9 and older browsers. No vendor prefixes or workarounds are needed to use GSAP and the library is compatible back to IE6. It’s already equipped to handle browser quirks and compensate so that we don’t have to. This is a huge advantage to using a Javascript library.

Using Javascript includes plugins!

All of this is awesome, but it gets better, because GSAP has plugins. The ScrollTo plugin can handle scroll controlled animations. The DrawSVG plugin can hide and reveal SVG strokes to make them look like they are being drawn as part of the animation. MorphSVG can turn any SVG shape into another SVG shape over a timeline. The Text plugin can animate text content, even down to individual letters. Obviously, this is much more than you can do with CSS based animations. This opens up a whole realm of fun possibilities for a website!

See the Pen MorphSVG – sequence by GreenSock (@GreenSock) on CodePen.

There’s always more out there!

Although I’ve only discussed three types of animation we can use, there are many more. CSS3 and Greensock are the ones that I always keep in my back pocket for projects. The web is constantly changing and growing though, and we can only guess what awesome animation tools will be available to us in the future!

 

If you want to check out some neat animation stuff, I recommend Matt Pearson’s art. His work is responsible for getting me in to animation when I was in college (then using a language called Processing).

Want some cool animations made for your site? Contact us to do a consultation!

Arrow Left Back To Blog Home

Start a Discussion