328 lines
17 KiB
HTML
328 lines
17 KiB
HTML
<h1 id="awesome-web-animation-awesome">Awesome Web Animation <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://awesome.re/badge.svg" alt="Awesome" /></a></h1>
|
||
<p><a href="https://awesome-web-animation.netlify.com">
|
||
<img src="readme_assets/header.png"> </a></p>
|
||
<p>This list contains the most useful tools and data for creating web
|
||
animations. * Any libraries that help animate anything in the browser -
|
||
Canvas, SVG, text, scroll etc. * Books about animation in the browser. *
|
||
GUI tools for animation that can be exported to the browser.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#svg">SVG</a></li>
|
||
<li><a href="#common">Common</a></li>
|
||
<li><a href="#css">CSS</a></li>
|
||
<li><a href="#canvas">Canvas</a></li>
|
||
<li><a href="#animate-on-scroll">Animate on scroll</a></li>
|
||
<li><a href="#text">Text</a></li>
|
||
<li><a href="#gui-tools">GUI tools</a></li>
|
||
<li><a href="#react">React</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#videos">Videos</a></li>
|
||
</ul>
|
||
<h2 id="svg">SVG</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/adobe-webplatform/Snap.svg">Snap.svg</a>
|
||
- The JavaScript library for modern SVG graphics.</li>
|
||
<li><a href="https://github.com/svgdotjs/svg.js">Svg.js</a> - The
|
||
lightweight library for manipulating and animating SVG.</li>
|
||
<li><a href="https://github.com/maxwellito/vivus">Vivus</a> - Library to
|
||
make drawing animation on SVG.</li>
|
||
<li><a href="https://github.com/ConnorAtherton/walkway">Walkway</a> - An
|
||
easy way to animate SVG elements.</li>
|
||
<li><a href="https://github.com/DmitryBaranovskiy/raphael">Raphael</a> -
|
||
JavaScript Vector Library.</li>
|
||
<li><a href="https://github.com/uxebu/bonsai">Bonsai</a> - BonsaiJS is a
|
||
graphics library and renderer.</li>
|
||
</ul>
|
||
<h2 id="common">Common</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/greensock/GSAP">GSAP</a> - JavaScript
|
||
animation library.</li>
|
||
<li><a href="https://github.com/CreateJS/TweenJS">TweenJS</a> - A simple
|
||
but powerful tweening / animation library for JavaScript. Part of the
|
||
CreateJS suite of libraries.</li>
|
||
<li><a href="https://github.com/juliangarnier/anime">Anime.js</a> -
|
||
JavaScript animation engine.</li>
|
||
<li><a href="https://github.com/mojs/mojs">Mojs</a> - The motion
|
||
graphics toolbelt for the web.</li>
|
||
<li><a href="https://github.com/ThrivingKings/animo.js">Animo.js</a> - A
|
||
powerful little tool for managing CSS animations.</li>
|
||
<li><a href="https://github.com/visionmedia/move.js">Move.js</a> - CSS3
|
||
backed JavaScript animation framework.</li>
|
||
<li><a href="https://github.com/julianshapiro/velocity">Velocity</a> -
|
||
Accelerated JavaScript animation.</li>
|
||
<li><a href="https://github.com/bendc/animateplus">Animateplus</a> - A+
|
||
animation module for the modern web.</li>
|
||
<li><a href="https://github.com/lvivski/animatic">Animatic</a> - CSS
|
||
animations engine.</li>
|
||
<li><a href="https://github.com/just-animate/just-animate">Just
|
||
Animate</a> - Making Animation Simple.</li>
|
||
<li><a href="https://github.com/HaikuTeam/core">Haiku Core</a> -
|
||
Interactive UI animation engine for the Web. Core renderer for Haiku
|
||
Animator.</li>
|
||
<li><a href="https://github.com/sasha240100/between.js">Between.js</a> -
|
||
Lightweight JavaScript (ES6) tweening engine.</li>
|
||
<li><a
|
||
href="https://github.com/kimmobrunfeldt/progressbar.js">Progressbar.js</a>
|
||
- Responsive and slick progress bars.</li>
|
||
<li><a href="https://github.com/gre/bezier-easing">Bezier easing</a> -
|
||
Cubic-bezier implementation for your JavaScript animation easings.</li>
|
||
<li><a href="https://github.com/glslify/glsl-easings">Glsl easings</a> -
|
||
Easing functions in GLSL.</li>
|
||
<li><a href="https://github.com/tweenjs/es6-tween">ES6-tween</a> - ES6
|
||
version of tween.js.</li>
|
||
<li><a href="https://github.com/sfi0zy/weeee">Weeee.js</a> - Tiny
|
||
Javascript tweening engine.</li>
|
||
</ul>
|
||
<h2 id="css">CSS</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/daneden/animate.css">Animate.css</a> - A
|
||
cross-browser library of CSS animations. As easy to use as an easy
|
||
thing.</li>
|
||
<li><a href="https://github.com/foundation/motion-ui">Motion-ui</a> -
|
||
The powerful Sass library for creating CSS transitions and
|
||
animations.</li>
|
||
<li><a href="https://github.com/miniMAC/magic">Magic</a> - CSS3
|
||
Animations with special effects.</li>
|
||
<li><a href="https://github.com/lukehaas/css-loaders">Css-loaders</a> -
|
||
A collection of loading spinners animated with CSS.</li>
|
||
<li><a href="https://github.com/tobiasahlin/SpinKit">SpinKit</a> - A
|
||
collection of loading indicators animated with CSS.</li>
|
||
<li><a href="https://github.com/tictail/bounce.js">Bounce.js</a> -
|
||
Create beautiful CSS3 powered animations in no time.</li>
|
||
</ul>
|
||
<h2 id="canvas">Canvas</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/CreateJS/EaselJS">EaselJS</a> - EaselJS
|
||
is a library for building high-performance interactive 2D content in
|
||
HTML5.</li>
|
||
<li><a href="https://github.com/fabricjs/fabric.js">Fabric.js</a> -
|
||
JavaScript canvas library with animation support.</li>
|
||
<li><a href="https://github.com/paperjs/paper.js">Paper.js</a> - The
|
||
Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to
|
||
JavaScript and the browser, using HTML5 Canvas.</li>
|
||
<li><a href="https://github.com/konvajs/konva">Konva</a> - Konva.js is
|
||
an HTML5 Canvas JavaScript framework that extends the 2d context by
|
||
enabling canvas interactivity for desktop and mobile applications.</li>
|
||
<li><a href="https://github.com/jonobr1/two.js">Two.js</a> - A renderer
|
||
agnostic two-dimensional drawing api for the web with animation
|
||
support.</li>
|
||
<li><a href="https://github.com/koggdal/ocanvas">Ocanvas</a> -
|
||
JavaScript library for object-based canvas drawing.</li>
|
||
<li><a
|
||
href="https://github.com/martinlaxenaire/curtainsjs">Curtainsjs</a> -
|
||
Lightweight vanilla WebGL JavaScript library that turns HTML DOM
|
||
elements into interactive textured planes.</li>
|
||
<li><a
|
||
href="https://github.com/robin-dela/hover-effect">Hover-effect</a> -
|
||
JavaScript library to draw and animate images on hover.</li>
|
||
<li><a href="https://github.com/williamngan/pts">Pts.js</a> - Pts is a
|
||
typescript/javascript library for visualization and
|
||
creative-coding.</li>
|
||
<li><a
|
||
href="https://github.com/matteobruni/tsparticles/">tsParticles</a> -
|
||
tsParticles is a lightweight typescript/javascript library for creating
|
||
easily particles animations.</li>
|
||
</ul>
|
||
<h2 id="animate-on-scroll">Animate on scroll</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/michalsnik/aos">AOS</a> - Animate on
|
||
scroll library.</li>
|
||
<li><a href="https://github.com/alexfoxy/laxxx">Laxxx</a> - Simple &
|
||
light weight (3kb minified & zipped) vanilla JavaScript plugin to
|
||
create smooth & beautiful animations when you scrolllll!</li>
|
||
<li><a href="https://github.com/matthieua/WOW">Wow</a> - Reveal CSS
|
||
animation as you scroll down a page.</li>
|
||
<li><a
|
||
href="https://github.com/scrollreveal/scrollreveal">Scrollreveal</a> -
|
||
Animate elements as they scroll into view.</li>
|
||
<li><a href="https://github.com/janpaepke/ScrollMagic">ScrollMagic</a> -
|
||
The JavaScript library for magical scroll interactions.</li>
|
||
<li><a href="https://github.com/alexcambose/motus">Motus</a> - Animation
|
||
library that mimics CSS keyframes when scrolling.</li>
|
||
<li><a href="https://github.com/mciastek/sal">Sal</a> - Performance
|
||
focused, lightweight scroll animation library.</li>
|
||
</ul>
|
||
<h2 id="text">Text</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/yuanqing/malarkey">Malarkey</a> -
|
||
Simulate a typewriter effect in vanilla JavaScript.</li>
|
||
<li><a href="https://github.com/mattboldt/typed.js">Typed.js</a> - A
|
||
JavaScript Typing Animation Library.</li>
|
||
<li><a href="https://github.com/ics-ikeda/shuffle-text">Shuffle-text</a>
|
||
- Shuffle-text is JavaScript text effect library such as cool legacy of
|
||
Flash.</li>
|
||
<li><a href="https://github.com/akzhy/typebot">Typebot</a> - JavaScript
|
||
library for typing animation.</li>
|
||
<li><a href="https://github.com/bradley/Blotter">Blotter</a> - A
|
||
JavaScript API for drawing unconventional text effects on the web.</li>
|
||
</ul>
|
||
<h2 id="react">React</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/framer/motion">Motion</a> - Open source,
|
||
production-ready animation and gesture library for React.</li>
|
||
<li><a href="https://github.com/gregberge/svgr">SVGR</a> - Transform
|
||
SVGs into React components.</li>
|
||
<li><a
|
||
href="https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md">React
|
||
tsParticles</a> - ReactJS wrapper for <em>tsParticles</em></li>
|
||
<li><a href="https://www.react-spring.io/">React spring</a> - Open
|
||
source, spring-physics based animation library for React that supports
|
||
interpolations. Fast and easy to use.</li>
|
||
</ul>
|
||
<h2 id="gui-tools">GUI tools</h2>
|
||
<ul>
|
||
<li><a href="https://svgartista.net/">Svgartista</a> - 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.</li>
|
||
<li><a href="https://jeremyckahn.github.io/mantra/">Mantra</a> - Mantra
|
||
is a timeline editing tool for web animations. It is inspired by tools
|
||
such as Adobe Flash and After Effects.</li>
|
||
<li><a href="https://animista.net/">Animista</a> - 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.</li>
|
||
<li><a href="http://cssanimate.com/">Cssanimate</a> - 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.</li>
|
||
<li><a href="https://matthewlein.com/tools/ceaser">Ceaser</a> - 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!</li>
|
||
<li><a href="https://cubic-bezier.com/">Cubic Bezier</a> - A great
|
||
utility for creating Bezier curves. You can import and export curves
|
||
to/from your library to share them with others.</li>
|
||
<li><a href="http://alexberg.in/keyframer/">Keyframer</a> - Tool that
|
||
help visualize animation components and output the code required.</li>
|
||
<li><a href="http://angrytools.com/css/animation/">CSS Animation Kit</a>
|
||
- Select any predefined samples from top panel. Below samples there is a
|
||
timeline of <span class="citation"
|
||
data-cites="keyframes">@keyframes</span>. 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.</li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<h3 id="svg-animation"><a
|
||
href="https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation/dp/1491939702">SVG
|
||
animation</a></h3>
|
||
<p><img src="data/covers/92ZiDgAAQBAJ.jpg" width="200"/></p>
|
||
<p> </p>
|
||
<p>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.</p>
|
||
<h3 id="creating-web-animations-bringing-your-uis-to-life"><a
|
||
href="https://www.amazon.com/Creating-Web-Animations-Bringing-Your/dp/1491957514/">Creating
|
||
Web Animations: Bringing Your UIs to Life</a></h3>
|
||
<p><img src="data/covers/NK9rDgAAQBAJ.jpg" width="200"/></p>
|
||
<p> </p>
|
||
<p>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.</p>
|
||
<h3 id="transitions-and-animations-in-css-adding-motion-with-css"><a
|
||
href="https://www.amazon.com/Transitions-Animations-CSS-Adding-Motion/dp/149192988X/">Transitions
|
||
and Animations in CSS: Adding Motion with CSS</a></h3>
|
||
<p><img src="data/covers/bx2OrgEACAAJ.png" width="200"/></p>
|
||
<p>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.</p>
|
||
<h3
|
||
id="designing-interface-animation-meaningful-motion-for-user-experience"><a
|
||
href="https://www.amazon.com/Designing-Interface-Animation-Meaningful-Experience/dp/1933820322/">Designing
|
||
Interface Animation: Meaningful Motion for User Experience</a></h3>
|
||
<p><img src="data/covers/Ano3DwAAQBAJ.jpg" width="200"/></p>
|
||
<p>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.</p>
|
||
<h3 id="web-animation-using-javascript-develop-design"><a
|
||
href="https://www.amazon.com/Web-Animation-using-JavaScript-Develop/dp/0134096665">Web
|
||
Animation using JavaScript: Develop & Design</a></h3>
|
||
<p><img src="data/covers/4Wo0BwAAQBAJ.jpg" width="200"/></p>
|
||
<p>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 programmatically maintainable.</p>
|
||
<h3 id="css-animations-and-transitions-for-the-modern-web"><a
|
||
href="https://www.amazon.com/gp/product/0133980502/">CSS Animations and
|
||
Transitions for the Modern Web</a></h3>
|
||
<p><img src="data/covers/848sBQAAQBAJ.png" width="200"/></p>
|
||
<p>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.</p>
|
||
<h3 id="animation-in-html-css-and-javascript"><a
|
||
href="https://www.amazon.com/Animation-HTML-JavaScript-Kirupa-Chinnathambi/dp/1502548704">Animation
|
||
in HTML, CSS, and JavaScript</a></h3>
|
||
<p><img src="data/covers/47ffoQEACAAJ.png" width="200"/></p>
|
||
<p>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 pushing pixels on the canvas.</p>
|
||
<h3 id="foundation-html5-animation-with-javascript"><a
|
||
href="https://www.amazon.com/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/">Foundation
|
||
HTML5 Animation with JavaScript</a></h3>
|
||
<p><img src="data/covers/RmphScK8u-gC.jpg" width="200"/></p>
|
||
<p>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 over from Flash to create standards-compliant games,
|
||
applications, and animations that will work across all modern browsers
|
||
and most mobile devices, including iPhones, iPads, and Android
|
||
devices.</p>
|
||
<h2 id="videos">Videos</h2>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/user/flintyara">Yuri Artyukh
|
||
youtube channel</a> - This man creates amazing web animations using
|
||
various technologies for this, and recording it all in steam
|
||
format.</li>
|
||
</ul>
|
||
<h3 align="center">
|
||
✨<a href="https://awesome-web-animation.netlify.com"> See also web page
|
||
version of this list </a>✨
|
||
</h3>
|
||
<p align="center">
|
||
<a align="center" href="https://awesome-web-animation.netlify.com">
|
||
<img src="https://api.netlify.com/api/v1/badges/692bdbac-34dc-4783-8a4e-e4a586fee7b6/deploy-status" alt="Netlify deploy status">
|
||
</a>
|
||
</p>
|
||
<p><a
|
||
href="https://github.com/sergey-pimenov/awesome-web-animation">webanimation.md
|
||
Github</a></p>
|