What's happening today:

• Talk: Google's HIG
• Assignment 2
• Canvas and WebGL

Material Design

Required Readings

• What is Material
• Animation
• Style
• Layout
• Patterns - Errors, Gestures, Loading Images, Navigation Drawer, Scrolling Techniques
• Components (optional)

Out now

SVG

DISCLAMER: SVG is slow on mobile when you have to animate many objects

I also don't know many libraries that make working with SVG easy, but this doesn't mean you can't use SVG in your projects. Make an educated choice.

Libraries

• D3.js

CSS Transforms

Libraries

Note these libraries are about animating HTML elements using CSS or JS animations that take advantage of CSS transforms. You can style your elements with plain CSS.

• List, Cheat Sheet, Animate.css, Greensock GSAP, Velocity.js (jquery anim. replacement)

Canvas

Libraries

• Kinetic.js, Easel.js, Fabric.js, Paper.js

WebGL

Libraries

• Pixi.js (2d), Three.js (3d)

Extra Animation Libraries

• (SOLE) Tween.js (good paired with pixi/three), Tween.js Part of Easel / Create JS, Greensock GSAP (can use with pixi/three)

USE LIBRARIES