Draft
This page is not complete.
Animation and Graphics
TODO This section needs more work
Animation
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.
Graphics
Charts and Graphs
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 seperation 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.
2D Content
<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
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.