Animation
Discover libraries and frameworks for creating stunning animations in web and mobile applications.
Animata
animata.design
Animated components available for easy integration into applications. The components are free and open source, allowing developers to copy and paste them directly into their projects.
Animated-tailwindcss
npmjs.com
A library to add animations easily to their projects. The package or library includes built-in TypeScript declarations.
AnimatiSS
xsgames.co
A user-friendly tool designed for previewing custom CSS animations. It allows users to easily generate and copy animation code for integration into web projects. The tool features a variety of animation options, including scaling, rotation, and sliding effects, which can be applied in different directions and styles. This makes it a valuable resource for web developers and designers looking to enhance their projects with dynamic animations.
Animista
animista.net
A CSS animation library that allows users to explore, customize, and download pre-made CSS animations. It serves as a playground for testing various animation options such as easing, delay, and duration. Users can easily copy generated CSS code or download animations.
AutoAnimate
auto-animate.formkit.com
A zero-config animation utility that seamlessly adds smooth transitions to web applications using a single line of code.
CSS Loaders
css-loaders.com
A comprehensive collection featuring over 600 CSS-only loading animations.
CSS Spring Easing Generator
kvin.me
A tool designed to intuitively generate spring easings, featuring presets and customizable inputs for perceptual duration and bounce.
Cattocss
cattocss.com
An online CSS animations library that allows users to implement animations in web projects without the need for installing dependencies.
Clippy
bennettfeely.com
CSS clip-path maker.
Easing Cheat Sheet
easings.net
A guide to assist in selecting the appropriate easing function to enhance animation quality. Easing functions are essential for creating realistic animations, as they mimic the natural movement of objects. In real life, objects do not start or stop instantly and rarely move at a constant speed. For instance, when opening a drawer, the motion begins quickly and slows down as it extends out. Similarly, when an object is dropped, it accelerates downward and may bounce back after hitting the ground.
Framer for Developers
framer.com
An open-source, production-ready animation library for React, designed to simplify animation in web applications. It features a declarative syntax that reduces code complexity, making it easier to read and maintain. The library automates animations between components and provides advanced event listeners, enhancing user interaction through features like tap and drag.
GSAP
gsap.com
A high-performance JavaScript animation library that enables the creation of professional animations for the modern web. It supports a wide range of animations, including UI, SVG, and WebGL experiences. The library offers a variety of built-in easing options and allows users to create custom easing curves. It facilitates the arrangement and control of animation sequences, making it easy to choreograph complex animations. Additionally, it includes tools for smooth scrolling, SVG manipulation, and engaging text effects, ensuring polished and accessible interactions.