Animation

Animation is the appearance of motion (typically of hand-drawn, or computer-generated images appearing in a 2D or 3D plane).

Cinemagraph

• Create 3D anaglyph images with 3 lines of Ruby code: http://blog.saush.com/2011/07/19/create-3d-anaglyph-images-with-3-lines-of-ruby-code/
• 5 ways brands are using cinemagraphs: http://digiday.com/brands/five-ways-brands-using-cinemagraphs/
• Rich man's GIFs -- Stock photography sites rush to the "Cinemagraph" craze: http://digiday.com/platforms/rich-mans-gif-stock-photography-sites-rush-cinemagraph-craze/

Tools

• Flash
• HTML5 and CSS3
• Adobe Edge: http://labs.adobe.com/technologies/edge/
• Blender - Open Source 3D animation tool: http://www.blender.org/
• GSAP -- the standard for JS/HTML5 animations: https://greensock.com/gsap (port of popular Flash GSAP library)

Resources

• wikipedia: 12 basic principles of animation
• Animation in HTML, CSS, and JavaScript: http://www.kirupa.com/book/animation_in_html_css_and_javascript.htm#sampleChaptersLocation
• Animate.css -- convenience lib wrapper around CSS3 animations/transitions: https://animate.style | DOWNLOAD | SRC (canned "just add water" aka. "class names", ready to go CSS3 animations library for text, images and other dynamically displayed content)
• "Purple Haze" animated smoke effect in CSS3/SVG: https://codepen.io/jcoulterdesign/pen/wGyNzL
• "Breaking Bad" animated smoke effect in CSS3 & SVG: https://codepen.io/TimPietrusky/pen/Bsegb

Tutorials

• Semantic Animation (with CSS3): http://css-tricks.com/14458-semantic-animation/
• From Design to Code -- Creating and Animating Images with CSS: https://www.outsystems.com/blog/posts/from-design-to-code_creating-and-animating-images-with-css
• JS -- Easing and Brownian Motion: https://codepen.io/scorch/post/easing-and-brownian-motion
• CSS3 animations - gravity/slowmo on click/draghttps://codepen.io/dissimulate/pen/dJgMaO
• Under the hood of CSS & JS animations + how to optimize their performance: https://blog.sessionstack.com/how-javascript-works-under-the-hood-of-css-and-js-animations-how-to-optimize-their-performance-db0e79586216
• 3D animations with P5.js lib: https://repl.it/@templates/3D-Animations-with-p5js

External Links

• wikipedia: Animation
• wikipedia: Limited animation
• wikipedia: Rotoscoping
• wikipedia: Flash animation
• China making anime push as Japan hits slump : http://www.japantoday.com/category/entertainment-arts/view/china-making-anime-push-as-japan-hits-slump

See Also

3D | Movies | TV | Online Video | Advertising | Flash