Sorry! Mobile support is to be added..
Please use a desktop for now. Thanks!

Please click "Start" on the right

Joy Hsu

Sr. Software Engineer
Graduate School of Business

Animation with HTML5

CSS, Canvas, SVG, Javascript

Animation

Designed

Meaningful

Support interactions

Responsive, UX

CSS

Transitions

Animations

https://www.mozilla.org/en-US/firefox/42.0/whatsnew/?oldversion=41.0.2

Super Hero Example

Canvas

Canvas

Example

http://threejs.org/examples/canvas_geometry_birds.html

SVG (Scalable Vector Graphics)

> svg example (click here)

XML markup language

> see results (click here)

SVG

1. Draggable SVG link >
2. Visual Intro to Machine Learning link
3. Map route (CSS: strokeDasharray strokeDashoffset)
80

SVG + GreenSock (GSAP)

  • GreenSock Animation Platform (GSAP) ex1

    • More

  • D3 demo
  • Snap.svg
  • SVG.js
  • ScrollMagic/Skrollr

    • Stanford IT Unconference

    Resources

    https://css-tricks.com
    https://cssanimation.rocks/principles/
    https://www.google.com/design/spec/animation/responsive-interaction.html
    https://developer.mozilla.org/en-US/
    http://designmodo.com/steps-css-animations/
    http://codepen.io/
    https://developer.mozilla.org/en-US/docs/Web/CSS/transform
    http://greensock.com/
    https://developers.google.com/web/fundamentals/design-and-ui/animations