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 is a powerful native UI animation design application for Mac & iOS. Visit

Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps. Visit

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

Design interactive high-fidelity prototypes for iOS, Android, desktop or the web. Invent new animations and interactions. Integrates with Sketch and Photoshop. Visit

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 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

Try InVision free and turn your screens into live, clickable prototypes in seconds. Visit

Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app prototypes. Visit

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

Make engaging social videos online for your business. Create animated videos and presentations. Grow your business with the power of video. Visit

Run CSS animations in order. Visit

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 is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Visit

Easy scroll animations for web and mobile browsers. Visit

Motion UI is a Sass library for quickly creating CSS transitions and animations. Visit

Small library to animate elements on your page as you scroll. Visit

A minimal, UI-focused programming language for web designers. Visit

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 is a tool and JS library that lets you create beautiful CSS3 powered animations. Visit

A performant transitions and animations library. Visit

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

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

Create accelerated JavaScript animation with Velocity. Visit

Reveal CSS animation as you scroll down a page. Visit

Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. Visit

GSAP is a JavaScript library for high-performance HTML5 animations that work in all major browsers. Visit

Morf.js is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions. Visit

Rocket creates an animation when an item is moved to another element. Visit

CSS3 Animations with special effects. Visit

Some CSS classes to move your DOM! Visit