Web Animation
SVG
6_ENTRIESCommon
17_ENTRIES- GSAP
JavaScript animation library.
- TweenJS
A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.
- Anime.js
JavaScript animation engine.
- Mojs
The motion graphics toolbelt for the web.
- Animo.js
A powerful little tool for managing CSS animations.
- Move.js
CSS3 backed JavaScript animation framework.
- Velocity
Accelerated JavaScript animation.
- Animateplus
A+ animation module for the modern web.
- Animatic
CSS animations engine.
- Just Animate
Making Animation Simple.
- Haiku Core
Interactive UI animation engine for the Web. Core renderer for Haiku Animator.
- Between.js
Lightweight JavaScript (ES6) tweening engine.
- Progressbar.js
Responsive and slick progress bars.
- Bezier easing
Cubic-bezier implementation for your JavaScript animation easings.
- Glsl easings
Easing functions in GLSL.
- ES6-tween
ES6 version of tween.js.
- Weeee.js
Tiny Javascript tweening engine.
CSS
6_ENTRIES- Animate.css
A cross-browser library of CSS animations. As easy to use as an easy thing.
- Motion-ui
The powerful Sass library for creating CSS transitions and animations.
- Magic
CSS3 Animations with special effects.
- Css-loaders
A collection of loading spinners animated with CSS.
- SpinKit
A collection of loading indicators animated with CSS.
- Bounce.js
Create beautiful CSS3 powered animations in no time.
Canvas
10_ENTRIES- EaselJS
EaselJS is a library for building high-performance interactive 2D content in HTML5.
- Fabric.js
JavaScript canvas library with animation support.
- Paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
- Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
- Two.js
A renderer agnostic two-dimensional drawing api for the web with animation support.
- Ocanvas
JavaScript library for object-based canvas drawing.
- Curtainsjs
Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
- Hover-effect
JavaScript library to draw and animate images on hover.
- Pts.js
Pts is a typescript/javascript library for visualization and creative-coding.
- tsParticles
tsParticles is a lightweight typescript/javascript library for creating easily particles animations.
Animate on scroll
7_ENTRIES- AOS
Animate on scroll library.
- Laxxx
Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
- Wow
Reveal CSS animation as you scroll down a page.
- Scrollreveal
Animate elements as they scroll into view.
- ScrollMagic
The JavaScript library for magical scroll interactions.
- Motus
Animation library that mimics CSS keyframes when scrolling.
- Sal
Performance focused, lightweight scroll animation library.
Text
5_ENTRIES- Malarkey
Simulate a typewriter effect in vanilla JavaScript.
- Typed.js
A JavaScript Typing Animation Library.
- Shuffle-text
Shuffle-text is JavaScript text effect library such as cool legacy of Flash.
- Typebot
JavaScript library for typing animation.
- Blotter
A JavaScript API for drawing unconventional text effects on the web.
React
4_ENTRIES- Motion
Open source, production-ready animation and gesture library for React.
- SVGR
Transform SVGs into React components.
- React tsParticles
ReactJS wrapper for tsParticles
- React spring
Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.
GUI tools
8_ENTRIES- Svgartista
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.
- Mantra
Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects.
- 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.
- Cssanimate
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.
- Ceaser
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!
- Cubic Bezier
A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others.
- Keyframer
Tool that help visualize animation components and output the code required.
- CSS Animation Kit
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.
Books
8_ENTRIES- SVG animation
SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.
- Creating Web Animations: Bringing Your UIs to Life
Thanks to faster browsers, better web standards support, and more powerful devices, the web now defines the next generation of user interfaces that are fun, practical, fluid, and memorable. The key? Animation. But learning how to create animations is hard, and existing learning material doesnt explain the context of the UI problem that animations are trying to solve. Thats where this book comes in.
- Transitions and Animations in CSS: Adding Motion with CSS
Add life and depth to your web applications and improve user experience through the discrete use of CSS transitions and animations. With this concise guide, you'll learn how to make page elements move or change in appearance, whether you want to realistically bounce a ball, gradually expand a drop-down menu, or simply bring attention to an element when users hover over it.
- Designing Interface Animation: Meaningful Motion for User Experience
Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brands personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the users experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.
- Web Animation using JavaScript: Develop & Design
We've come a long way since the days of flashing banner ads and scrolling news tickers. Today, the stunning motion design of iOS and Android dramatically improves a users experience — instead of detracting from it. The best sites and apps of today leverage animation to improve the feel and intuitiveness of their interfaces. Sites without animation are starting to feel antiquated. This book provides you with a technical foundation to implement animation in a way thats both visually stunning and …
- CSS Animations and Transitions for the Modern Web
Modern websites use a variety of animated effects not only to improve usability but also to delight and surprise users. Some of these effects require complex scripting or programming skills, but many are within the grasp of designers who are already familiar with CSS and HTML. CSS Animations and Transitions for the Modern Web shows designers how to add movement to web pages over time using CSS3 style definitions.
- Animation in HTML, CSS, and JavaScript
This book will help you create practical / usable / wickedly-cool animations in HTML, CSS, and JavaScript. Each chapter is filled with cleanly explained concepts, beautifully illustrated diagrams, colorific code snippets, and cringeworthy one-liners guaranteed to make your friend who laughs at everything groan. You will start by learning how to create animations and transitions in CSS. Towards the end, you will learn how to create animations in JavaScript by manipulating DOM elements as well as…
- Foundation HTML5 Animation with JavaScript
Foundation HTML5 Animation with JavaScript covers everything that you need to know to create dynamic scripted animation using the HTML5 canvas. It provides information on all the relevant math you'll need, before moving on to physics concepts like acceleration, velocity, easing, springs, collision detection, conservation of momentum, 3D, and forward and inverse kinematics. Foundation HTML5 Animation with JavaScript is a fantastic resource for all web developers working in HTML5 or switching ove…
Videos
1_ENTRIES- Yuri Artyukh youtube channel
This man creates amazing web animations using various technologies for this, and recording it all in steam format.