UI Development

Animation: History and Best Approaches

Introduction

The days of childhood bring a lot of memories when you think about them. The food we ate, the games we played, the TV we watched- they all formed a very distinct childhood experience. The end result was the same though- they all brought us happiness. But we never noticed the effort that was put into these specific actions- the amount of work that went into them and how through the evolution of trying to make ourselves happy, we leaped so much in technology. Who would’ve thought when Walt Disney said “It’s kind of fun to do the impossible,” that the state of animation would be here- something that was once just deemed for entertainment, is now a major source of business for many?

History

The leap of technology that I previously talked about might be a stark difference for someone who fell asleep in the 1930s and woke up today but for us regular folk, it has only been natural. And if you just talk about the animation in the Web World, it didn’t quite arrive until 1987, when the GIF (Graphics Interchange Format) was introduced and primarily used for inducing a 3D illusion for a company’s logo. Then, Web Animation was pretty much the same for another ten years when Flash finally broke into the market. This resulted in rich websites that were interactive and overall, just beautiful. As you can see in the images below:

 Bear 71

 

Stardoll

But then came the, drumroll please, mobile. Flash posed a heavy load on the computing power of the earliest smartphones and it resulted in a very swift drainage of the phone battery. And as some phones decided not to support Flash anymore, the ball game changed completely. Flash was no longer being used for applications and the Internet, once again, became a very boring and static place. But, hold your breath, this was only until CSS3 finally brought in Animations and Transitions. And as time passed by, Animation was possible to be handled through JavaScript too.

Best Approaches

Let us talk about CSS Animations for a bit now. CSS Animations affect computed property values. This effect occurs by adding a defined value to the CSS Cascade (at CSS Animations level) that produces the appropriate calculated value for the current state of the animation. Animations will override all normal values and are able to affect every computed property and with the help of the Transform (transition) property, we are able to achieve anything. Let me get into why I said Transform specifically and not Transition in a minute. Until then, let us speak about JavaScript Animation and if it is better or worse than CSS Animation.

There are a bunch of JavaScript frameworks in the Market today that do a lot of things that CSS or Native JavaScript can’t do yet. One of them is GSAP (GreenSock Animation Platform) and it seems to be the best one according to multiple resources and then there’s something called Web Animations API that isn’t very stable yet but is steadily working towards becoming a must learn technology. The question now rises, whether CSS Animation is worth it at all. And here are few things to consider before coming to that conclusion:

Functionality

JavaScript might outperform CSS in this regard. As in, there is a lack of independent scale/position/rotation with CSS. All of these properties are clubbed under one CSS property of Transform. You cannot individually animate these for one element and you’ll see further on in this article on why that can be a possible problem. If you do simple animations, this won’t be issue at all.

Overhead

CSS, once learnt, can prove to be simple and effective and it is the consistent with every development environment. JavaScript on the other hand, while providing basic animation functionality, does most of the Animation with the help of another library/framework. And one other thing to consider is that one developer, who’s familiar with one framework, might not be familiar with the other. And if the developer happens to be developing in jQuery (which was never designed to be an animating library), compatibility issues might arise.

Performance

This is a disputed section. Many developers believe that CSS gives good performance and JavaScript does not and vice versa. Both are wrong assumptions. While it is true that CSS does have great performance (because it offloads all the animation logic onto the browser- it optimizes DOM interaction, memory utilization and employs the GPU for the best performance), it is also true that there are faster and slower JavaScript frameworks. The lightweight ones seem to have limited functionality, and the ones offering full functionality, are slower than CSS Animation. That said, GSAP seems to be a good option for both speed and functionality if you are going for complicated animations on your Web Page.

That said, let me give me some more insight on the JavaScript vs. CSS3 debate. Creating animations through the JavaScript route, is by far, more complex but it does give you more power over your animations because they’re imperative and CSS Animations are declarative. This means that in JavaScript, you’re able to programmatically define what you want to do, while in CSS, it’s all about specifications and declarations.

With JavaScript Animations, you’re in total control of an element’s styles at every step. This means you can slow down animations, pause them, stop them, reverse them, and manipulate elements as you see fit (these are all interfaces provided by Web Animations API/ WAAPI). This is especially useful if you’re building complex, object-oriented applications, because you can properly encapsulate the behavior of the objects.

In a way, the properties afforded to us by CSS3 are also brilliant. It allows us to animate any CSS property (the background, the height, the width, opacity, etc.) with ease by using keyframes and sub-properties (animation-fill-mode, animation-iteration-count, animation-delay, etc.) but as stated above, it does not allow individual style attribute properties power to animate. And hence is best suited for simpler animations.

Now that everything is laid out, and you’ve chosen to use CSS Animations, here are a few best practices to follow if you want a truly seamless body of work:

  • Do not change any other property besides Transform and Opacity (other properties require a lot of work from the browser while the two mentioned above can be done more efficiently without a re-render from the browser)
  • Use Animation Choreography (use animation-delay to form an intricate order to things which would also help in avoiding lag in your animation.)
  • Use a global multiplier (to test your animations in slow speed and then once everything looks fine, speed it up using the same multiplier)
  • Test on multiple devices and from early on in development

Conclusion

In this blog, we have seen Animation’s brief but colorful history. We have seen how with the advent of newer technologies, some older ones had to go out of practice. We have also seen how the above events led to the state of Animation now and how it has made our lives generally easier. We have tried to answer if CSS Animation is better or JavaScript’s and come to the conclusion that if your Animation is something relatively simple, go for CSS, otherwise opt for JavaScript. And finally, we have seen some pointers for CSS Animations. And well, that’s all folks. I hope you found this blog at least a little bit informational. Until next time.

About The Author