27 free animation tools for design

In “15 Tools for Animation”, I presented easy to use animation tools for content marketing. But animation can also add design to a site, to improve the visitor experience.

Here is a list of animation tools for design. There are plugins and libraries for simple transitions and effects, as well as platforms for complex animations. All of these tools are free.

Animation tools for design

Lazy line painter is a jQuery plugin for SVG path animation. Simply drop your SVG file into the Lazy Converter and copy the code.

Lazy line painter

Animist contains a collection of predefined CSS animations to experiment with before using them. Animate entrances, exits, text, background or create highlights to grab attention.

Flubber is a library to provide a smooth animated transition between two arbitrary shapes.

Shift.css provides a simple framework for creating timed and contained CSS animations. In the Shift container, animate HTML, nested, and responsive elements.

Animate.css is a collection of cross-browser animations. Animate inputs and outputs, as well as effects for attention seekers: bounce, flash, pulse, elastic, shake, swing, tada, wobble, and jello. Use for emphasis, homepages, sliders, and overall glow.

Animate.css

Animate.css

Popmotion is a library of JavaScript movements. Animations include tween, spring, keyframes, decay, timeline, offset, crossfade, line art, and more.

Animo.js is a tool for managing transitions and animations with JavaScript. Animo also offers a small library of plugins, each designed to harness the power of Animo.

Bonsai.js is a lightweight JavaScript graphics library with an intuitive graphics API and SVG rendering engine.

Motion.ui. From Zurb, Motion UI is a library for quickly creating CSS transitions and animations. The main function of Motion UI is to move components in and out. Apply these transitions to overlays, out of canvas menus, modals, etc.

Motion user interface

Motion user interface

Snabbt.js is a minimalist JavaScript animation library. It will translate, rotate, resize, tilt and resize your elements. The goal is to create a library that will allow the user to make smooth animations without needing to know a lot about browser rendering.

Bounce.js is a JavaScript tool and library for generating keyframe animations based on CSS3. Produce static keyframes for use without additional JavaScript. To generate them on the fly, use the Bounce.js library.

odious.css is an animation game with five classes: shake it, step up, fontalicious, strobe and twister.

Rocket creates animation when an element is moved to another element. It includes eight effects, including pulse, flip, circle, circle, and rotation.

Rocket

Rocket

CSS3 animation cheat sheet is a set of predefined animations. Choose from inputs or a variety of diverse effects including bounce, pulse, float, throw, pull up or down, and stage left or right.

Tuesday is an original CSS animation library. To sample, simply select the inputs and outputs, then click animate

CSS3 Animate is a keyframe animation generator. Create quick and easy CSS3 keyframe animation in your browser without using any desktop software.

Tridiv is a web editor for creating 3D shapes in CSS.

Tridiv

Tridiv

Overview.css is a collection of CSS3-based hover effects to apply to links, buttons, logos, SVGs, and featured images. Apply to your own elements, modify them, or use them for inspiration.

Velocity.js is an animation engine with the same API as jQuery animation. It works with and without jQuery. It’s fast and features color animation, transformations, loops, eases, SVG support, and scrolling.

SVG.js is a lightweight library for manipulating and animating SVGs. SVG.js has no dependencies and aims to be as small as possible while still providing nearly full coverage of the SVG specification.

Magical animations, another CSS3 special effects animation library, is useful for basic movements.

KUTE.js is a JavaScript animation engine with a collection of tools to help create custom animations. KUTE.js comes bundled with CSS plugin, SVG plugin, ATTR plugin, Text plugin, jQuery plugin – as well as easing functions, color converters, and utility functions. KUTE.js allows you to create chain tweens and tweens.

KUTE.js

KUTE.js

Choreographer.js is a simple library for complicated animations. Run animations based on the desired metric, such as scroll position, mouse position, and timestamp. Includes two built-in animation functions: Scale and Change.

Saffron is a collection of Sass mixins and wizards that make it much easier to add CSS3 animations and transitions. Include a mixin in your Sass declaration, then set any configuration using mixin variables and parameters.

Mojs.io is a mobile graphics tool belt for the web. Mojs is fast and retina ready with simple declarative APIs. Create vibrant animations, bubble layouts, and more.

Animae.js is a lightweight JavaScript animation library. It works with CSS properties, CSS transformations, SVG or DOM attributes, and JavaScript objects. Use keyframes, play, pause, restart, and search for animations or timelines. Additional features include CSS transformations, SVG animations, easing functions, and more.

CSShake provides CSS classes to move your DOM. The basic collection contains 11 shake variations.

CSShake

CSShake


Source link

Leave a Reply

Your email address will not be published.