Track Awesome Web Animation Updates Dailyhttps://www.trackawesomelist.com/sergey-pimenov/awesome-web-animation/feed.xml2021-09-16T16:30:08.000Zjsonfeed-to-atomhttps://www.trackawesomelist.com/favicon.icohttps://www.trackawesomelist.com/icon.pngA list of awesome web animation libraries, books, apps etc.https://www.trackawesomelist.com/2021/09/16/Awesome Web Animation Updates on Sep 16, 20212021-09-16T16:30:08.000Z2021-09-16T16:30:08.000Z
]]>1 awesome projects updated on Sep 16, 2021https://www.trackawesomelist.com/2021/01/09/Awesome Web Animation Updates on Jan 09, 20212021-01-09T19:17:13.000Z2021-01-09T19:17:13.000Z
React
React spring - Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.
]]>1 awesome projects updated on Jan 09, 2021https://www.trackawesomelist.com/2020/10/29/Awesome Web Animation Updates on Oct 29, 20202020-10-29T12:08:30.000Z2020-10-29T12:08:30.000Z
Yuri Artyukh youtube channel - This man creates amazing web animations using various technologies for this, and recording it all in steam format.
]]>1 awesome projects updated on Oct 29, 2020https://www.trackawesomelist.com/2020/07/21/Awesome Web Animation Updates on Jul 21, 20202020-07-21T15:14:39.000Z2020-07-21T15:14:39.000Z
Canvas
tsParticles (⭐4.3k) - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.
]]>2 awesome projects updated on Jul 21, 2020https://www.trackawesomelist.com/2020/06/21/Awesome Web Animation Updates on Jun 21, 20202020-06-21T19:03:20.000Z2020-06-21T19:03:20.000Z
Canvas
Pts.js (⭐4.9k) - Pts is a typescript/javascript library for visualization and creative-coding.
]]>1 awesome projects updated on Jun 21, 2020https://www.trackawesomelist.com/2020/02/02/Awesome Web Animation Updates on Feb 02, 20202020-02-02T16:18:28.000Z2020-02-02T16:18:28.000Z
Animate on scroll
Laxxx (⭐9.3k) - Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
React
Motion (⭐16k) - Open source, production-ready animation and gesture library for React.
SVGR (⭐9.1k) - Transform SVGs into React components.
]]>3 awesome projects updated on Feb 02, 2020https://www.trackawesomelist.com/2020/01/21/Awesome Web Animation Updates on Jan 21, 20202020-01-21T19:46:42.000Z2020-01-21T19:46:42.000Z
]]>1 awesome projects updated on Jan 21, 2020https://www.trackawesomelist.com/2019/12/28/Awesome Web Animation Updates on Dec 28, 20192019-12-28T14:15:16.000Z2019-12-28T14:15:16.000Z
SVG
Snap.svg - The JavaScript library for modern SVG graphics.
Svg.js (⭐9.9k) - The lightweight library for manipulating and animating SVG.
Vivus (⭐14k) - Library to make drawing animation on SVG.
SpinKit (⭐19k) - A collection of loading indicators animated with CSS.
Bounce.js (⭐6.2k) - Create beautiful CSS3 powered animations in no time.
Canvas
EaselJS (⭐8k) - EaselJS is a library for building high-performance interactive 2D content in HTML5.
Fabric.js (⭐23k) - JavaScript canvas library with animation support.
Paper.js (⭐13k) - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
Konva (⭐8.3k) - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Two.js (⭐7.8k) - A renderer agnostic two-dimensional drawing api for the web with animation support.
Ocanvas (⭐482) - JavaScript library for object-based canvas drawing.
Curtainsjs (⭐1.3k) - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
Shuffle-text (⭐93) - Shuffle-text is JavaScript text effect library such as cool legacy of Flash.
Typebot (⭐17) - JavaScript library for typing animation.
Blotter (⭐2.9k) - A JavaScript API for drawing unconventional text effects on the web.
GUI tools
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.
