Soon after mobile web browsing took off, web developers discovered a glaring issue. Rendering web animation using Flash containers was no longer a viable "cross-platform" tool for bringing animation to the browser. Flash animators could make flash videos for desktop web browsers (Safari, Chrome, Firefox, etc.), but those same videos would fail to load on Android or iOS devices.
Fast forward a decade or so and we find that things have gotten a bit worse for Flash video. Major desktop web browsers are vowing to end Flash video support by 2020 while mobile browsers on Android and iOS have completely abandoned the idea of integrating Flash whatsoever.
The solutions to this problem today is straightforward. Web developers can use the HTML5 CANVAS or SVG to bring native animations to the browser. The HTML Canvas does some things that Flash doesn't.
HTML 5 CANVAS
- CANVAS doesn't exist in an embedded file like Flash. Flash uses either the EMBED or the OBJECT element to display, and cannot interact directly with the other HTML elements. While FLASH is very different than typical video files (MP4, MOV, etc.), it behaves very much the same in the browser. Because the HTML5 CANVAS element is part of the DOM, it can interact with the DOM in many unique ways.
<canvas id="canvas" width="200" height="100"></canvas>
<script> var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke();
- SVG, unlike CANVAS or FLASH, are images that are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with text editors, as well as with drawing/illustration software like Adobe Illustrator.
<svg style="margin: 0 auto 1.5rem;" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
While these HTML5 elements alone are great tools for rendering native browser animations, web developers and animators still feel like something is missing. The majority of web animations lack the overall quality and "pop" that animations created in Adobe After Effects, a professional and industry-standard video compositing and motion graphics software, have.
So, let's once again identify the problem. The animation in a browser can currently be created with Flash (outdated and incompatible) or HTML5 elements like CANVAS or SVG (overly complicated for creating simple animations), all of which seem to be lacking something. Animators can create professional, high-quality animations in After Effects, but the only way to animate these in a browser is through large video files that slow page speed and lack the ability to interact with other DOM elements.
Meet Lottie and BodyMovin. These two open source projects are the future of web, Android, iOS, and React Native animation. BodyMovin, an After Effects plugin allows you to export your compositions into small, robust JSON files. Lottie for the web, an open source project from AirBnB Design, allows you to render these JSON files into HTML5 CANVAS or SVG containers in real time. These animations are light-weight (great for page speed, unlike videos), interact with the DOM, and have amazing After Effects capabilities. They can be used for navigation, AJAX loading, form validation, micro-interactions, location and maps interfaces, or just to add that extra "pizzazz" to your site. Take a look at a few examples below.
For the "Pizzazz"
As you can see, the possibilities for these animations are endless. The simplicity of creating a high-quality animation in After Effects can be easily rendered in the browser with very minimal effects on page speed and user experience. For more resources and information, head to Lottie Files to see how you can bring animations to your next project.