Web Animator

Web animation has seen an exponential growth over the past couple of years or so. The Flash era has been replaced by HTML5 CSS3 animations and JavaScript animation libraries.

Web & interaction developers now use platforms such as Greensock for creating stunning web animations. Now-a-days web development conferences are abuzz with discussions on web animations.


Scalable Vector Graphics is here to stay

SVG has always been popular in web animation. Now that Chrome has decided to end SMIL, there are still other libraries like GSAP (GreenSock Animation Platform) & SnapSVG which can easily animate a SVG.

In the coming days, we might see a SVG animation which is independent of the underlying library. But until that happens, GSAP will continue to dominate the animation front.

Animations done via GSAP have proven to be reliable across browsers and are backward compatible.

In future, we expect to see a standalone JS library similar to GSAP for SVG animation.


Increasing use of Web Animations API

No need to worry about integrating animation technologies like CSS & SMIL. Web Animations API does it for you. It’s a boon for web animator which servers as one stop animation engine. The API also caters to web browsers and facilitates in building new animation tools for developers.

Rise of browser animation tools

In 2015, Firefox launched its animation timeline for the developer edition. Although it’s still not fully matured to be used as a full-fledged animation tool, it certainly is a step in the right direction.

We hope to see third party extensions for editing SVG & CSS animations in future.


Animation tools & Prototyping

Web animators have traditionally faced problems with the tools used to create animations. Web animators need to master CSS, JS & HTML before they can create a formidable animation. These days, software like After Effects by Adobe can simplify the effort and reduce the development time. But still there is no way to test from a user’s point of view.

Tools like Principle try to address this gap by offering graphical UI. With this tool, you can create prototypes without touching the underlying HTML.

However, on the flip side, you might mess up the web development workflow in the process. So, it’s basically a trade-off which a visual designer needs to make.

Adobe decided to focus on support for HTML5 instead of Flash. Accordingly, Flash professional CC got replaced by Animate CC. It still has support for Flash until new standards are fully matured.


Conception of Motion design

Salesforce came up with their own design system, i.e., ‘Lightning design system’ based on motion design principles. Motion design guidelines from this system are modular in nature and hence easy to adopt.

How far will motion design guidelines be adopted is more of a wait and watch kind of situation.

Motion Design

Relationship to UX

By default, animations are opacity-based. Not all sites want to offer an invasive animation on the front end. Thus we may see experiments on UI with features like ‘Anmiation off’, ‘Mute audio’ and so on.

There may be more cases relating to UX over time which will need to be addressed.

Don’t get me wrong here, animations when done right, offer a huge improvement in UX.


Importance of Animation

Ever since animation has returned to the fore, it has helped us convey our message in a more polished and expressive way. Animations help in branding in a strong way without incurring high costs.

Web animation is an expanding field and there are new tools, frameworks & libraries being rolled out almost every day to aid the web animators.

W3C is rolling out specs for animation as of writing this post. You can read more about it here: https://www.w3.org/TR/motion-1/.

As specs & guidelines like these mature, we will see an increase in demand for their adoption. For designers & developers, it creates a growing opportunity because clients will want to implement new trends on their sites.

A good design is not that is flashy and modern but one that provides an excellent user experience.