Javascript Web Animation Resources

Submitted by BeatnikDude on Mon, 12/08/2014 - 20:42

Tags:

    Years and years ago (when Flash was our only tool for web animation of any depth or expectation) it was easy to imagine a time when Javascript animation would blossom with editors and libraries that could fully empower professional multimedia presentation and interface enhancements. And now that time has finally arrived.

    It had been a few years since I I had looked at the possibilities, so I did a little digging on JS animation.

    Following my notes and links.

    The Smashing magazine article was good as were a couple tutorials. I am interested in the libraries; Web Animations API, Velocity.js, Greensock.com and Processing.js (note Khanacademy.org class). The animation editors look to have reached maturity I am hopeful for the Google Web Designer Beta and hope that it is easy to use the exportable code for animations as modules within larger development.

 

  • Articles and Tutorials:
    • Good article Smashing magazine: "The State Of Animation 2014" title says it all
    • Three-part series on Javascript animation.
    • Javascript animation tutorial:
    • Fun tutorial, to bad I cant find more than 1 of 4.
  • Libraries:
    • Web Animations API: Web Animations is a new JavaScript API for driving animated content on the web as defined by the WC3.
    • Velocity.js: Looks useful for Accelerated JavaScript animation."Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's fast, and features color animation, transforms, loops, easings, SVG support, and scrolling. Include it on your page, and replace all instances of jQuery's $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices."
    • Greensock.com: Looks useful, a nearly free set of libraries for animation, tweening, timelines, etc.
    • Processing.js: Interesting, note Khanacademy.org course, "sister project of the popular Processing visual programming language, designed for the web. Processing.js makes data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest."
  • Online Courses:
    • Khanacademy.org: "Intro to JS: Drawing & Animation" Learn how to use JavaScript and the ProcessingJS library to create drawings and animations.
  • Editors to create Javascript animation:
    • Google Web Designer Beta: An editor to create interactive HTML5-based designs and motion graphics that can run on any device. The exported code is exposed and editable. I wonder about using exported elements a pieces of larger projects.
    • Mixeek: A FREE online css3 & html5 animation editor.
    • html5maker: A pay online css3 & html5 animation editor
    • Plenty more ...