Rec Room - Animation and Graphics
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.
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.
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 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.
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.