THE STATE OF WEB ANIMATION : 2017
Introduction to Animation
Animation is change over time.
Traditionally this was done by creating still images and displaying them one at a time at a high enough speed to create the illusion of smooth motion - picture a flip book. This type of "frame by frame" animation, though tedious to create, still has many uses today: stop motion animation, hand-drawn cartoons, and even some computer animation techniques still use this simple method. Animation playback speed is a function of the number of frames times the frame rate, measured in frames per second (FPS). The higher the frame rate, the more capability there is to display motion smoothly. For most purposes we can aim for a frame rate of 30fps, though the human eye can detect much higher on very dynamic scenes with fast motion. Higher frame rates come at the cost of more visual information to create, transfer, and render, and face limitations with display hardware as well.
A more advanced method of animation beyond frame by frame is "tweened" or "keyframe" animation. The term "tween" came about when you'd have a lead animator drawing the major "key" frames at large intervals or when something important changes, and then an army of subordinates doing the "in-between" frames; "tween" being shorthand for "in-between". When applied to computer animation, we have the computer handle the "tweening".
Animation for tv, film, and video is authored, rendered, and output to a static video file that can be played back. In the early days of the web we needed plugins to display video, now HTML5 video standards are universally supported by modern browsers and devices.
Animation on the web adds many more possibilities in how it can be authored, rendered, and experienced.
On the rendering aspect, animation on the web allows for "client-side" rendering by the user's web browser and device hardware. This means that animation does not have to be rendered ahead of time, but rather is generated on the fly. This also means that it can potentially respond to changes on the fly, if authored to do so: user interactivity can be integrated, responsive screen sizes can be accounted for, other non-user factors such as live data feeds or camera inputs can be accessed in real-time; the possibilities are limitless. There are limitations to client-side rendering, however: large file sizes for assets versus bandwidth can become an issue, processor power and memory can be issues especially on mobile devices or older systems, and differences in screen sizes and support for granular features can create complications in attempting to deliver the same experience to all users.
Why use animation?
Because we can. Because it's cool. Because it sets those who do apart from the masses that don't. Because it pushes the boundaries of web technology and hardware, allowing designers and developers to deliver new experiences to users. Animation, especially when paired with interactivity, can breathe life into something otherwise visually static and transform it into something playful, more immersive, arousing curiosity in the user to spend more time exploring content and engaging with it at a deeper level. Animation can add emphasis to important user interface elements and content, create a path leading the user's experience in specific directions. Animation is attention-grabbing, and it should be used with careful consideration, however. It would be easy to create something so overwhelming and confusing to the senses that it's a detriment to the experience.
Potential uses of animation on the web
- Data visualization is an excellent use of animation. Some types of content are complex enough that an interactive experience can best relay the information. A static chart could become more meaningful (and less boring) when it animates from one state to the next, or when the user can select what metrics they wish to view. Since data is inherently mathematic, it's the perfect type of content to be readily used programmatically with computer animation.
Great talks on data visualization:
Sidenote: you'll often see the browser's scrollbar disabled on parallax web sites, which would create issues for people who may not use traditional keyboards, a mouse with a scroll wheel, or other "expected" means of scrolling. For the most accessible UX, leave the scrollbar alone.
- Immersive full page experiences. These are often the most stunning, creative, award-winning, and technically groundbreaking examples of animation on the web. Who says all you can do with a web page is just look at some flat text and images and scroll down and down? Why not zoom in deeper as you're flying towards a destination with interactive hotspots appearing along the way? Why not navigate a 3D space in your browser to experience a geographic location? Why can't a web site be more like an interactive movie where the user controls the scenes and experience the content over time? Anything is possible (that doesn't mean it's easy to concept, design, or develop, though).
- 3D animation. We've had 2D animation on the web for some time, largely thanks to the proliferation of Adobe Flash and more recently with HTML5 technologies taking its place. 3D animation has been harder to bring to the web largely due to the processing power required to render 3D environments in browsers and on mobile devices. Despite limitations, it's definitely here, and support for 3D rendering technologies such as WebGL are now standard in modern browsers and even on mobile devices. Besides full 3D experiential web sites, this could be used for individual content elements or content features as well.
- Virtual Reality and Augmented reality. Another new facet of animation on the web is VR. The big catch with VR is the hardware needed to experience it. Google Cardboard and similar near-disposable viewers depend upon smartphone hardware, and other options such as the Oculus Rift and Microsoft Hololens cost hundreds of dollars. For the moment VR is relegated to mostly the gaming market and other niche uses, but it will certainly become more mainstream and more available as time goes on. Augmented reality also makes use of special eyewear and allows the user to see the real world normally while being augmented with additional visual information on the lens. Eventually we may all have cybernetic "AR" contact lenses or implants, but for now this tech is finding growth in the occupational space.
- Can anyone think of other uses?
Designing for the web can be a pretty difficult task, especially since responsive design practices require that the same user interface and content be adaptable for all users on all screen sizes on all devices. Now lets throw in some new technologies, complex interactivity, and the element of time! Designers aren't always animators, animators aren't always designers, and creating animation on the web may fall to a developer who is neither a designer or animator; these are all reasons that animation on the web is underutilized. Since there are special considerations and often a lot of effort involved with web animation projects, collaboration is especially important.
These are CSS properties that are often animated, for example: width, height, scale, rotation, placement, opacity, color.
These are interactive events at which things can be triggered to happen, for example: responsive screen width, height, and/or aspect ratio; scroll position on the page as measured from the top or bottom, from other elements, when other elements are in or out of the viewport; mouse hover (which is desktop only) or click/tap; drag, drag and drop; keyboard keys; any event can set or stop a timer; external events such as time or triggers from other sites and data sources; conditional logic such as do this then this happens; mobile devices have gyroscopic sensors; GPS or IP-based geolocation.. the list is virtually endless.
Animation often means working with new technologies in new ways, which is something most developers do all the time, but especially so in this case since very few developers have the opportunity to be full-time web animators. Since animation involves the element of time, mistakes and misdirection can lead to lengthy revisions.
- Debugging and Performance-related Resources
- jQuery Coding Standards & Best Practices
Contains a lot of easy to implement jQuery selector performance tips based on the native JS methods jQuery uses to perform DOM operations.
Avoiding excessive reflow.
- Scrolling and Scroll Event Performance
Depending on what's called for in the wide world of web animation, these projects can be a handful. Animation concepts may be difficult to design, to relay to clients in any draft form, interactivity considerations can be tricky to plan out, developers may be dealing with new technologies and lots of unknowns, any changes down the line can be very time consuming, testing can take longer, and bugs can be more likely and more difficult to solve. In short, animation is more likely to involve risk. Minimizing risk involves careful planning and estimating, collaboration, and possibly some padding on the timeline and budget.
- CSS3 Transforms
Modify 2D and 3D coordinate space with properties such as scale, translate (move), rotate, skew, perspective, etc. Not inherently animated, but commonly used within animation operations. Note that these are among the most efficient properties to animate.
- CSS3 Transitions
When CSS property changes are applicable, as with :hover or using JS to dynamically add/remove CSS classes, allows control over the timing of the transition.
- CSS3 @keyframes Animation
Define animation properties including looping and iterations on a normal CSS selector, specifying a named @keyframes rule that defines CSS properties for the beginning and end points. Useful in conjunction with JS triggering. More advanced timing and chaining functions are coming but not yet widely supported.
http://24ways.org/2012/flashless-animation (example of flipping through image sprite frames with steps property)
- HTML5 Canvas
- Animating SVG
http://snapsvg.io/ A JS library described as "jQuery for SVG", from the creator ofRaphael.JS.
- Web Animation API
- WebGL API
- jQuery .animate
jQuery is already used in most web sites, and can do some basic animation. It doesn't always do it efficiently, however, so the following 2 solutions offer more efficiency and power.
A lightweight replacement for jQuery .animate with better performance.
- GSAP (Greensock Animation Platform)
A robust, high performance animation library that's been around for some time, with lightweight components that can be used individually and powerful plugins for special purposes. GSAP is also integrated into many other animation solutions and can be used in conjunction with nearly anything.
- Scroll-position aka Parallax libraries:
A fairly lightweight and simple plugin.
Powered by GSAP, uses GSAP JS syntax. More fully featured and very powerful, for complex scene creation and interactivity.
- Comparison of Skrollr and ScrollMagic: https://ihatetomatoes.net/skrollr-vs-scrollmagic/
Often used in conjunction with parallax effects or animated content, plugins such as this turn the normal scrolling experience into more of a section by section slideshow. I'd recommend not disabling the scrollbar for UX reasons, and ensuring that multiple event handlers allow for scroll/slide progression: dragging the scrollbar, mousewheel, keyboard arrow keys, visual buttons. Design-wise, everything has to fit on the screen, which can be a challenge at small screen sizes, so the effect is often disabled at a certain size and for mobile devices.
- PixiJS, "the fastest, most flexible 2D WebGL renderer"
- 3D rendering and animation
A data visualization library that's been around for a long while, offering many interesting possibilities through its interactive and animation methods.
Adobe Animate (formerly known as Flash)
- Flash now offers support for HTML5 Canvas output, WebGL, SVG, and many other new "non-Flash" technologies.
- Remember that basic video can still be used to display animation created in After Effects, Final Cut, 3D animation software, etc. Video is often used in conjunction with other animation methods as content elements, background layers, and can be triggered to play/stop based on interactive events.
- 360' video and photos are now very popular and easy to create with consumer devices. They are often used in web sites in video player plugins that ultimately render through WebGL and HTML5 canvas.
- Video files are often extremely large in file size, especially if you consider a high resolution full-screen video use with any substantial length, or a 360' video comprised of multiple stitched together video files. Use conservatively and consider efficient delivery methods, lazyloading, unloading, targeting devices, and test bandwidth usage using browser console/dev tools.