Are you in the position where you need to create some high quality animations for a web project?
Maybe you have a boss or you are working for a client and you have committed to a project that involves creating animations. If you do not have experience working with Javascript or CSS this can feel very daunting at first.
The easiest way to make your project look more professional is to use CSS3 for your transitions and animations. If you do not understand JavaScript you are limited by what you can perform. You will only be able to perform basic tasks such as triggering your animations. However, if you have some basic CSS skills you can easily apply more complex directions.
JavaScript Libraries
If you are trying to achieve something a little more advanced, like trigger events and multiple animations independent of each other, you will need to look into using jQuery or JavaScript animation plugins.
If you are using pure CSS based solutions there are some functionality restrictions. jQuery unlocks a wide range of animations and web design options that can greatly improve the user experience of a website. You are much more likely to have your users interested and return if your site is dynamic and interactive.
AniJS
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 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 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
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
Make it pop with animation, physics, and input tracking. In the browser, on Node, anywhere.
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 is a JavaScript library to create physics-based animations.
mo.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
html5tooltips.js
Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework dependencies.
Rocket
scrollReveal.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
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.
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 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 is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
slidr.js
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
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 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
It’s Tuesday: A quirky CSS Animation Library
Animsition
Transformicons
Magic animations
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