CSS And Javascript Animation Libraries To Create Awesome Effects

Velocity.js

Velocity.js

Velocity is an animation engine with the same API as jQuery’s animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Vivus

vivus

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

snabbt.js

snabbt.js

snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.

snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.

Pace

Pace

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

Popmotion

Popmotion

Make it pop with animation, physics, and input tracking. In the browser, on Node, anywhere.

Bounce.js

Bounce.js

Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you’d like your application to generate these on the fly, you can use the Bounce.js library.

Dynamics.js

Dynamics.js

Dynamics.js is a JavaScript library to create physics-based animations.

mo.js

mo.js

cta.js

cta.js

cta.js or “Call to Animation” is a light-weight performant library to animate any element (“action”) onto any other element (“effect”) on the page. It is written with an aim to promote visual continuity in web apps.

animo.js

animo.js

html5tooltips.js

html5tooltips.js

Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework dependencies.

Rocket

Rocket

scrollReveal.js

scrollReveal.js

Wow.js

Wow.js

Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Transit

Transit

jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

parallax.js

parallax.js

parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene… Oh, you don’t have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead.

Sly

Sly

Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support.

It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites.

Move.js

Move.js

Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.

slidr.js

slidr.js

CreateJS

CreateJS

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

Flippant.js

Flippant.js

jmpress.js

jmpress.js

CSS Libraries

Experienced developers and web designers have already put the hard work in to create these CSS animation libraries. You can simply access the information, add an element and class to the stylesheet and use the animations you want.

animate.css

animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

MOTION UI

MOTION UI

It’s Tuesday: A quirky CSS Animation Library

It's Tuesday: A quirky CSS Animation Library

Animsition

Animsition

Transformicons

Transformicons

Magic animations

Magic animations

Hover.css

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Effeckt.css

Effeckt.css

Leave a comment

Your email address will not be published.