awesome list
web animation

Books

SVG

Common

CSS

Canvas

Scroll

Text

React

GUI

  • Cover of SVG Artista

    SVG Artista

    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.

  • Cover of Mantra

    Mantra

    Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects.

  • Cover of Animista

    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.

  • Cover of Cssanimate

    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.

  • Cover of Ceaser

    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...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!

  • Cover of Cubic Bezier

    Cubic Bezier

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

  • Cover of Keyframer

    Keyframer

    Tool that help visualize animation components and output the code required.

  • Cover of CSS Animation Kit

    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.