The use of animation and motion in user interfaces by designers has been steadily going up in the last few years. And that’s a good thing.
Animated interactions are not only a great way to encourage user engagement, but they also improve the overall user experience in most apps or websites. However, designing animations is not an easy process without the right tools.
That’s why I decided to put together this list useful animation tools and libraries. Enjoy!
Native Apps
Kite Compositor
Kite Compositor is a powerful native UI animation design application for Mac & iOS. Visit
Flinto
Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps. Visit
Principle
Principle makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. Visit
Framer
Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and interactions. Integrates with Sketch and Photoshop. Visit
Tumult Hype 3
Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required. Visit
Web Based Apps
Animista
Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Visit
InVision
Try InVision free and turn your screens into live, clickable prototypes in seconds. Visit
Marvel
Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app prototypes. Visit
Atomic
Atomic has everything you need to create amazing prototypes and it comes with all the happiness of being 100% in the cloud. Try it free! Visit
Animatron
Make engaging social videos online for your business. Create animated videos and presentations. Grow your business with the power of video. Visit
CSSynth
Run CSS animations in order. Visit
Ceaser
Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations. Visit
JS & CSS3 Libraries
Anime.js
Anime is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Visit
ScrollReveal
Easy scroll animations for web and mobile browsers. Visit
Motion UI
Motion UI is a Sass library for quickly creating CSS transitions and animations. Visit
AOS – Animate on Scroll
Small library to animate elements on your page as you scroll. Visit
uilang
A minimal, UI-focused programming language for web designers. Visit
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. Visit
Bounce.js
Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations. Visit
Effeckt.css
A performant transitions and animations library. Visit
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. Visit
Animatic
With Animatic it’s easy to animate over a hundred objects at a time. Each item can have it’s mass and viscosity to emulate realistic objects! Visit
Velocity
Create accelerated JavaScript animation with Velocity. Visit
WOW.js
Reveal CSS animation as you scroll down a page. Visit
Saffron
Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. Visit
GSAP
GSAP is a JavaScript library for high-performance HTML5 animations that work in all major browsers. Visit
Morf.js
Morf.js is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions. Visit
Rocket
Rocket creates an animation when an item is moved to another element. Visit
magic
CSS3 Animations with special effects. Visit
Csshake
Some CSS classes to move your DOM! Visit
