There are various tools found all around the web for creating animations and graphics for your work. In this article, we will go over a few of these options so that you can use to make your project stand out! For example, CSS is one way to apply animations to HTML elements, while Chartist is a great tool for creating graphs and charts.
There are many ways to animate things on the Web: CSS, SVG, canvas, WebGL, JavaScript, etc. Using CSS is a great way to apply simple animations to your HTML elements. Animate.css is a guide that shows how to apply fades, bounces, flips, zooms and more to your content.
For more complex animations, we recommend checking out Velocity.js. Velocity features color animation, transforms, loops, easings, SVG support, scrolling and more in a tiny library (9k) that also works across most browsers.
There are many chart and graphing libraries on the web, many of which work well on FirefoxOS. If you are looking for a recommendation, check out Chartist. Chartist charts and graphs use SVG, are responsive and DPI independent, and provide a clear separation between styling and definition/control.
To use Chartist in your app, go to the root folder of your app in your terminal and type:
bower install chartist --save
Read the Chartist - Getting Started guide for documentation on building with Chartist.
<canvas> is a HTML element which can be used to draw graphics using scripting (usually JavaScript). Beyond simple 2D drawing, the canvas element can be used to composite photos, provide animations and a host of other applications. The MDN Canvas Tutorial covers this subject in-depth.
2D Drawing can also be performed using WebGL. For fast 2D graphics, we recommend checking out Pixi.js. It renders 2D content using WebGL, but can also fall back to using canvas based on browser support.
3D Content can be rendered in most modern browsers using WebGL. MDN provides an excellent Getting Started with WebGL guide. If you're looking for a library that simplifies the creation of 3D scenes and content and has a large community, we recommend checking out Three.js.