YES! 

NO!

Code it. Yeah!

Sprite/Video

function loop() {
    // clamp at maximum 60fps in browser
    requestAnimationFrame(loop);
    render();
}

function render() {
    // draw something
}

function lerp(from, to, ratio) {
    return from + (to - from) * ratio;
}

// lazy shorthand
currentValue += (newValue - currentValue) * 0.1;

currentValue = lerp(currentValue , newValue, 0.1);

TweenMax.to(elem, duration, {property: value, ease: easingFunction});

TweenMax.fromTo(elem, duration, {property: fromValue}, {property: toValue});

var tweenObj = {animation: 0};
TweenMax.to(tweenObj , 2, {animation: 1});

Physically
makes sense

EaseInOut

EaseOut / EaseIn

Cheaper

For example in CSS:

https://jsfiddle.net/k96fsmav/2/​

Grapher(Mac)

https://www.desmos.com/

Edan Kwan ( 1986-present)

2D

3D

Pixi.js

Two.js

Three.js

Babylon.js

Unity?

Goo

Vertex Shader

Fragment Shader

var vertices = [x0, y0, x1, y1, x2, y2...]

gl.drawArrays(gl.triangles, ..

// OR DrawElements with Indices
gl.drawElements(gl.triangles, ..

attribute vec2 aPosition;

void main(void) {
    gl_Position = vec4(aPosition, 0.0, 1.0);
}

JS with WebGL API

GLSL

• gl.POINTS
• gl.LINES
• gl.LINE_STRIP
• gl.LINE_LOOP
• gl.TRIANGLES
• gl.TRIANGLE_STRIP
• gl.TRIANGLE_FAN

var texture = gl.createTexture();
texture.image = image;
gl.bindTexture(gl.TEXTURE_2D, texture);

uniform sampler2D uTexture;

varying vec2 vTexCoord;

void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord);
}

JS with WebGL API

GLSL

Texture