To understand the state of motion graphics on the web and where we’re headed, we should look at the needs, the solutions, and the tools used to create those solutions.
We have two basic needs in motion graphics. Motion graphics that can be interacted with and those that can’t, so let’s start there. Solutions for non-interactive motion graphics are animated gifs, cinemagraphs, and video. Motion graphics that can be interacted with are based in canvas, css&html, and webGL. If you look at the tools available to create each of these, you can see where the quality lies and where we are in need of something new.
Solutions for non-interactive motion graphics
The tools available for creating non-interactive motion graphics are quite robust. We have image editors that allow us to create animated gifs and cinemagraphs, like Photoshop, Fireworks, Gimp, as well as an endless number of other offline and online solutions. Many of these tools have been around for many years and offer creators lots of options and ways to fine-tune their work. However these tools also have limitations and when those limitations began to be felt, other tools like After Effects, Premiere, iMovie, Final Cut, Roxio, and Vegas offer more robust timeline editing, effects, and control. These same tools are used for video creation. All of these solutions let creators see their vision come to life and allow for quick and easy editing before outputting and when making edits and outputting again.
Solutions for interactive motion graphics
Now let’s look at interactive motion graphics. The tools available for creating interactive motion graphics are growing but they haven’t found their stride. When creating interactive motion graphics we not only need the abilities found in non-interactive but we need even more. We need timelines to map out the flow of the animation, the ability to work with layers, and we need to be able to add effects. However, we also need to detect things like mouse overs, clicking, tapping, swiping, and many more. There needs to be logic that lives on in the final animated piece.
So, what tools allow us to create interactive motion graphics pieces? Adobe used to have Flash but it has gone away. Adobe tried creating an app called Edge but it struggled to find an audience and has been discontinued. Google has created Web Designer which also struggles with a clunky interface and is having trouble finding an audience. Adobe has announced that they will be releasing a new tool called Adobe Animate in 2016. We’ll have to see how this tool works and what it can do.
So, where does this leave us? We don’t have any tools to create interactive motion graphics. Especially none that allow us the control we used to have in Flash, and nowhere near the control found in non-interactive tools. Therefore, we rarely see interactive motion graphics today and those we do see aren’t usually refined.
The state of motion graphics on the web
We have refined and beautiful non-interactive motion graphics because we have the tools to make them and edit them. The tools are mature and cost effective to deploy for clients. There are very few interactive motion graphics today and those we do have are clunky. This is because these animations are either made using frustrating tools or are hand coded. This makes the final product low quality and not cost effective for clients. Creation is time consuming and expensive and editing can be a daunting process.
Let’s hope that Adobe Animate is the beginning of a new future for interactive motion graphics on the web. Let’s hope that moving forward we can have the tools we need to create and then come back and edit quickly and bring a new vibrancy and joy to the web for both our clients and web site visitors.