awesome-web-animation

A cross-browser library of CSS animations. As easy to use as an easy thing.

Composable CSS animation toolkit powered by CSS variables.

Create beautiful CSS3 powered animations in no time.

A web component for drawing patterns with CSS.

CSS classes to shake your DOM.

A collection of loading spinners animated with CSS.

A+ animation module for the modern web.

CSS animations engine.

JavaScript animation engine.

A powerful little tool for managing CSS animations.

Zero-config, drop-in animation utility for smooth DOM transitions.

Lightweight JavaScript (ES6) tweening engine.

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.

Visual programming tool for interactive WebGL content. Connect operators into patches and export real-time visuals to your website.

Now that we can use CSS transitions in all the modern browsers, let's make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you're anything like me*, you probably thought this about the default easing options: “ease-in, ease-out etc.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!

Welcome to CssAnimate.com, tool for easy and fast creating CSS3 keyframes animation, right in your browser without using any desktop software. If you want to render complex and consistent CSS3 animation on your site this tool is made for you! You can create complex CSS3 keyframe animation without any coding and to get ready made css styles for using on your site.

Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point.

A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others.

Animate on scroll library.

Touch-friendly 3D parallax hover effects.

Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!

Lightweight, accessible smooth scroll library.

Detection of elements in viewport and smooth scrolling with parallax.

Animation library that mimics CSS keyframes when scrolling.

A JavaScript API for drawing unconventional text effects on the web.

Simulate a typewriter effect in vanilla JavaScript.

Animated number component for React, Vue, Svelte, and vanilla JS.

Shuffle-text is JavaScript text effect library such as cool legacy of Flash.

Microlibrary to split text into words and characters for CSS animation.

JavaScript library for typing animation.

BonsaiJS is a graphics library and renderer.

Tools for smoother SVG shape morphing and interpolation.

A modern JavaScript library for SVG path animation.

Render After Effects animations natively on the web as SVG or Canvas.

JavaScript Vector Library.

The JavaScript library for modern SVG graphics.

Performant confetti animation in the browser.

Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.

EaselJS is a library for building high-performance interactive 2D content in HTML5.

JavaScript canvas library with animation support.

JavaScript library to draw and animate images on hover.

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Official GreenSock channel with GSAP tutorials, scroll demos, and plugin walkthroughs.

Creative front-end motion breakdowns: hover effects, text animation, and award-style interactions.

Practical CSS animation, transitions, and modern layout techniques.

Daniel Shiffman teaches creative coding, canvas animation, and p5.js in an approachable format.

This man creates amazing web animations using various technologies for this, and recording it all in steam format.