By
We expect the modern web to move. When used correctly, motion graphics can enhance user experience and usability. While motion graphics are a type of animation, they focus less on storytelling and more on giving life to a design and illustrating complex ideas.
Subtle motion can offer feedback on a form element, indicate the state of a UI element, or draw a user’s attention through a workflow.
Gone are the days where motion graphics on the web were limited to animated GIFs or relied on browser plugins like Flash. While web standards have evolved to include widely supported features like CSS3 transitions, those hoping to take their web animation to the next level have a plethora of options.
Motion graphics have come a long way. If you’re a UX designer or web developer looking for new tools to elevate your designs, take a look at how new tools can help solve a variety of challenges.
Presenting data to a diverse audience in an engaging way can be tough. Charts and graphs are great for slide decks and reports, but libraries like D3.js can bring your data to life. D3.js (which stands for “Data-Driven Documents”) is a JavaScript library that creates rich, interactive visualizations with the data it’s fed.
It’s framework-agnostic — React, Vue, WordPress, vanilla HTML/CSS/JS, and just about any other web technology you can imagine all work nicely with D3.js. And because it doesn’t rely on virtual canvases or plugin frames, your D3.js elements can be as responsive as the rest of your website. Check out a variety of examples of how D3.js makes data engaging and exciting.
Manipulating DOM elements with JavaScript and CSS isn’t a new concept, but for as long as it’s been around, it’s been fraught with issues of performance, varying levels of browser compatibility, and requires lots of development overhead to make things work smoothly (assuming they work at all).
Enter GreenSock Animation Platform (GSAP), another framework-agnostic JavaScript solution. GreenSock can manipulate DOM elements and SVGs, but it can also enhance your workflow with canvas-based libraries like Pixi, P5, or WebGL. GreenSock takes care of performance issues and jerky behavior in certain browsers behind the scenes so that you don’t have to think about it.
CSS transitions/animations with dubious support in Internet Explorer work without you having to worry about polyfills or hacks — in fact, GSAP gets your 2D CSS animations working as far back as IE6!
GSAP also solves the issue of inconsistent SVG animation support across browsers. If you’ve run into frustrations or limitations with web animation via CSS or JavaScript, there’s a good chance that GreenSock fixes them right out of the box.
Check out GSAP’s animation speed test to compare framerates with other leading animation libraries – GSAP is extremely performant. If that weren’t reason enough to explore it, GSAP is modular and relatively lightweight. A quick perusal of GSAP’s gallery makes it clear: you can do some amazing things with GSAP.
If you’re code-averse, or perhaps just much more at home in Adobe After Effects than a code editor, you’re in luck.
Bodymovin is an After Effects plugin that allows you to export animation comps as JSON objects. Lottie, developed by Airbnb, allows you to take these objects and render them on a web page or React Native phone app. Animations can be rendered as SVGs, which means that they will look great regardless of screen size.
---
These are just a few of the myriad options for creating motion graphics on the web. No matter what your needs and budget are, Integrity can help find the best solution to breathe life into your presence on the web.
Ready to begin your Contact Integrity today to get started.
