Skip to content

Latest commit

 

History

History
53 lines (43 loc) · 6.05 KB

animation.md

File metadata and controls

53 lines (43 loc) · 6.05 KB
Raw

Animation

Context: frontend-dev-bookmarks / Appearance

The process of creating motion and shape change.

frontend.directory PayPal Beerpay Flattr Gitter Twitter

  • Animate.css: Just-add-water CSS animations.
  • Approach: A jQuery plugin that allows you to animate CSS properties based on distance to an object.
  • CSS Spritesheet Animation Example: Sprite Sheet animation with CSS3 using the steps() feature.
  • Caat: Scene graph director-based animation framework for javascript.
  • CanvasScript3: CanvasScript3 is a Javascript library for the new HTML5 Canvas with an interface similar to ActionScript3. This library enables Sprite Groups, Layers, Mouse Events, Keyboard Events, Bitmap Effects, Tween Animations etc.
  • Collie: Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.
  • Firmin: Firmin is a JavaScript animation library using CSS transforms and transitions.
  • GreenSock Animation Platform: GreenSock Animation Platform is a suite of tools for scripted animation.
    • Codepen Repository: Codepen repository with examples of Greensock usage and code.
    • Examples: Here are a couple of examples demonstrating the core features of the Greensock Animation Platform.
    • Learning Center: Tutorials and videos for GreenSock Animation Platform.
  • Janis: Janis is a lightweight Javascript framework that provides simple animations via CSS transitions for modern browsers on the web as well as mobile devices.
  • Keanu: Keanu is a micro-lib for animation on Canvas/JS.
  • Magic: CSS3 Animations with special effects.
  • Move.js: Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
  • Rekapi: A keyframe animation library for JavaScript.
  • SVG.js: A lightweight library for manipulating and animating SVG.
  • Shifty: Shifty is a tweening engine built in JavaScript. It is designed to fit any number of tweening needs.
  • Snap.svg: Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
  • Stylie: Stylie is a fun tool for easily creating complex CSS animations. Quickly design your animation graphically, grab the generated code and go!
  • Twitter Fave Animation: Rather than rely on CSS transitions, the new animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function.
  • Web Animation Past, Present, and Future (2016): Rachel Nabors explores the world of web animation standards, platforms and tools in 2016: SVG, SMIL, GreenSock AP, Framer, Browser Tooling etc.
  • animate.less: A bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects.
  • emile.js: emile.js is a no-frills stand-alone CSS animation JavaScript framework.
  • jQuery Transit: Super-smooth CSS3 transformations and transitions for jQuery.
  • ramjet: Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.
  • scripty2: scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces.
  • textillate.js: Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
  • tween.js: Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equations.

License

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

Please provide a link back to this repository. This is not necessary for GitHub forks.