Context: frontend-dev-bookmarks / Appearance
The process of creating motion and shape change.
| + Animate.css: Just-add-water CSS animations. + Animate.less: A bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects. + Anime.js: Anime is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. + 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. + Emile.js: Emile.js is a no-frills stand-alone CSS animation JavaScript framework. + 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. + JQuery Transit: Super-smooth CSS3 transformations and transitions for jQuery. + 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. + 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. + Rekapi: A keyframe animation library for JavaScript. + SVG.js: A lightweight library for manipulating and animating SVG. + Scripty2: scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces. + 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! + 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. + 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. + Web Animations API: Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers. + Are we animated yet?: This page tracks the progress of implementing the Web Animations API in Firefox. + WAAPI Browser Support Test (+ Polyfill): This codepen tests whether and to which extend your browser supports Web Animations API. The test is run after including the Polyfill. + Web Animations Polyfill: JavaScript implementation of the Web Animations API. |
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.