Web Animation is now a real tool in front-end development tool chest. From full-screen moving images to small hover effects, touches of animation are popping up everywhere. So here are 25 useful web animation tools which helps frond-end developers create interactive animations with ease.
This is a collection of animated popups and modals, with ability to also animate its sub elements. You can show popup window on page load, on leave, on scrolling or show it on click event.
It is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.
AnimateMate Plugin For Sketch
You know feeling when you just need a simple animation for your awesome concept and you realize that it’s a huge process to move all assets into some other application? That’s a lot of hassle! AnimateMate created in order to produce and export simple animations straight out of Sketch. It’s not exactly rocket science, but it can lighten your workflow in some cases.
Ember Burger Menu
An off-canvas sidebar component with a collection of animations and styles using CSS transitions.
CSS doesn’t provide an easy way to pause an animation before it loops around again. Yes, there’s animation-delay but this simply denotes a delay at the very start of the animation, i.e on load. It provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration.
A plugin that animates an artistic font using Segment, the SVG strokes animation library.
This is an angular implementation of the popular Animate.css using the new $animateCss service in angular. This is the core and foundation, but there is room for so much more. You can use these css animations dynamically with zero setup. So you get the best of both worlds. Take a look and enjoy.
This is an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms.
Done in pure HTML and CSS, and are accessible by keyboard, so even people using screen readers are able to use it.
Morph DOM elements from one state to another with smooth animations and transitions.
It is a tool that you can use to create spinny-loady-thingies on the fly. It’s best for shapes that loop.
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more…
It allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down.
A simple and easy jQuery plugin for CSS animated page transitions.
A lightweight library for manipulating and animating SVG, without any dependencies.