move.js - CSS3 backed JavaScript animation framework

•    Javascript

---

CSS3 JavaScript animation framework.Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be sure to view the ./examples, and view the documentation.

animation css3

react-spring - ✌️ A spring physics based React animation library

•    TypeScript

---

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's animated and Cheng Lou's react-motion. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use. But while animated is mostly imperative and react-motion mostly declarative, react-spring bridges both. You will be surprised how easy static data is cast into motion with small, explicit utility functions that don't necessarily affect how you form your views.

react animation-library springs react-spring spring-physics animated animation hooks motion react-native spring typescript velocity

react-motion-ui-pack - Wrapper component around React Motion for easier UI transitions

•    Javascript

---

Please use react-spring for all of your animation needs. React Motion is an amazing animation library for React. React Motion UI Pack tries to help ease entry level / common use cases with React Motion by providing a higher level way to work with it and create common UI transitions easier. If you need more complex animations I suggest using React Motion directly.

react component react-component ui motion transition animation

GreenSock-JS - GreenSock's GSAP JavaScript animation library (including Draggable).

•    Javascript

---

GSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See the "Why GSAP?" article for what makes GSAP so special. Unlike monolithic frameworks that dictate how you structure your apps, GSAP is completely flexible; sprinkle it wherever you want. React, Vue, Angular or vanilla JS - doesn't matter. Simply put, GSAP is the most robust high-performance animation library on the planet, which is probably why every major ad network excludes it from file size calculations.

animation tweenlite tweenmax timelinelite timelinemax gsap greensock easing easepack pixiplugin customease jquery.gsap.js bezier svg 3d 2d transform morph morphing tweening

gfx - CSS3 3D animation library

•    Javascript

---

GFX is an 3D CSS3 animation library that extends jQuery with some useful functionality for programmatically creating CSS3 transitions. CSS3 transitions are superior to manual ones (using setTimeout) since they're hardware accelerated, something particularly noticeable on mobile devices. To see some demos, checkout GFX's site.

angular-motion - Fancy CSS3 animations for AngularJS 1.2+.

•    CSS

---

AngularMotion is an animation starter-kit built for AngularJS 1.2.0+. It's a spin off from AngularStrap v2 release work.

angular animation

react-flip-toolkit - A React FLIP animation library for highly configurable transitions

•    Javascript

---

A React FLIP animation library for highly configurable transitions

flip-animations reactjs scale-animation animations animation-library react-component flip transition animation

gfx - CSS3 3D animation library

•    Javascript

---

CSS3 3D animation library

magic - CSS3 Animations with special effects

•    CSS

---

If you want to use magic animations in react, see react-magic repository. This is a sample code on hover with jQuery, first you include the class "magictime" and after your desired animation.

css css3 animation animations magic

ant-motion - :bicyclist: Animate specification and components of Ant Design

•    Javascript

---

Animation specification and components of Ant Design. Ant Motion is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications.

react motion animation motion-design design react-motion react-animate react-component

data-driven-motion - Easily animate your data in react

•    Javascript

---

This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case.

react reactjs animation react-motion motion data-driven-motion spring animtion react-animation data driven

move.js - CSS3 backed JavaScript animation framework

•    Javascript

---

CSS3 backed JavaScript animation framework

react-spring - 🙌 Helping react-motion and animated to become best friends

•    Javascript

---

A set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can't cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another. This isn't meant to solve each and every problem but rather to give you tools flexible enough to confidently cast ideas into moving interfaces. react-spring is a cooked down fork of Christopher Chedeau's animated (which is used in react-native by default). It is trying to bridge it with Cheng Lou's react-motion. Although both are similarily spring-physics based they are still polar opposites.

react motion animated animation spring

compass-animation - css3 animation plugin for compass

•    Ruby

---

css3 animation plugin for compass

react-move - React Move 🌀 Beautiful, data-driven animations for React

•    Javascript

---

Beautiful, data-driven animations for React. React-move allows you to define your animations using durations, delays and ease functions. In react-motion you use spring configurations to define your animations.

react animation motion movement move easing interpolation animate transition-animation react-move resonance d3 svg charts graphs transitions

kissui.scrollanim - CSS3 scroll animation library

•    CSS

---

This library is a part of Kissui project. You can also download and include files manually from the latest releases.

animation animations-scrollanim viewport css3 scroll html5 kissui

spritejs - A cross-platform lightweight 2D render object model.

•    Javascript

---

SpriteJS is a cross-platform lightweight 2D render object model. Manipulate the sprites in canvas as you do with the DOM elements.

spritejs canvas animation graphics rendering renderer rendering-2d-graphics canvas-game canvas-animation svg-path vue react svg sprite graphic path d3 node-canvas parser html5 object-model

Flux-Slider - CSS3 Animation based image transitions

•    Javascript

---

CSS3 Animation based image transitions

Parallax-ImageScroll - JQuery and amd compatible plugin to create a parallax effect as seen at spotify

•    Javascript

---

JQuery and amd compatible plugin to create a parallax effect with images. Heavily inspired by the spotify.com website. The plugin is really simple to use with some options to tweek. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.

jquery-plugin ecosystem:jquery parallax scroll effect animation css3

checkbox

•    Javascript

---

A tiny set of CSS3 animations meant for your checkbox inputs. Include dist/css/yo.min.css instead, if you want to use only the Yo animation, for example.

checkbox css animation css-animations inputs forms css3 animations animated checkboxes