Awesome Web Animation

Web Animationを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

SVG

Snap.svg - モダン SVG グラフィックス用 JavaScript ライブラリ。
Svg.js - SVG を操作・アニメーションする軽量ライブラリ。
Vivus - SVG の描画アニメーションを作るライブラリ。
Walkway - SVG 要素を簡単にアニメーションする方法。
Raphael - JavaScript Vector Library。
Bonsai - BonsaiJS はグラフィックスライブラリ・レンダラー。

共通

GSAP - JavaScript アニメーションライブラリ。
TweenJS - シンプルで強力な JavaScript tweening／アニメーションライブラリ。CreateJS ライブラリスイートの一部。
Anime.js - JavaScript アニメーションエンジン。
Mojs - Web 向けモーショングラフィックスツールベルト。
Animo.js - CSS アニメーションを管理する強力で小さなツール。
Move.js - CSS3 をバックエンドにする JavaScript アニメーションフレームワーク。
Velocity - 高速化された JavaScript アニメーション。
Animateplus - モダン Web 向け A+ アニメーションモジュール。
Animatic - CSS アニメーションエンジン。
Just Animate - アニメーションをシンプルに。
Haiku Core - Web 向け対話的 UI アニメーションエンジン。Haiku Animator のコアレンダラー。
Between.js - 軽量 JavaScript（ES6）tweening エンジン。
Progressbar.js - レスポンシブで洗練されたプログレスバー。
Bezier easing - JavaScript アニメーション easing 向け Cubic-bezier 実装。
Glsl easings - GLSL の easing 関数。
ES6-tween - tween.js の ES6 版。
Weeee.js - 小さな JavaScript tweening エンジン。

CSS

Animate.css - クロスブラウザー CSS アニメーションライブラリ。とても簡単に使えます。
Motion-ui - CSS トランジション・アニメーション作成向け強力な Sass ライブラリ。
Magic - 特殊効果を持つ CSS3 Animations。
Css-loaders - CSS でアニメーションするローディングスピナーのコレクション。
SpinKit - CSS でアニメーションするローディングインジケーターのコレクション。
Bounce.js - 美しい CSS3 強化アニメーションをすぐに作成。

Canvas

EaselJS - HTML5 で高性能な対話的2Dコンテンツを構築するライブラリ。
Fabric.js - アニメーションサポートを持つ JavaScript canvas ライブラリ。
Paper.js - HTML5 Canvas を使い Scriptographer を JavaScript・ブラウザーへ移植した、ベクターグラフィックススクリプティングの万能ナイフ。
Konva - デスクトップ・モバイルアプリ向け canvas 対話性を可能にして2d context を拡張する、HTML5 Canvas JavaScript フレームワーク。
Two.js - アニメーションサポートを持つ、Web 向けレンダラー非依存の2次元描画 api。
Ocanvas - オブジェクトベース canvas 描画用 JavaScript ライブラリ。
Curtainsjs - HTML DOM 要素を対話的テクスチャ平面に変える軽量 vanilla WebGL JavaScript ライブラリ。
Hover-effect - ホバー時に画像を描画・アニメーションする JavaScript ライブラリ。
Pts.js - 可視化・クリエイティブコーディングのための typescript/javascript ライブラリ。
tsParticles - パーティクルアニメーションを簡単に作る軽量 typescript/javascript ライブラリ。

スクロール時アニメーション

AOS - スクロール時アニメーションライブラリ。
Laxxx - スクロール時にスムーズで美しいアニメーションを作る、シンプルで軽量（minified・zipped で3kb）vanilla JavaScript プラグイン！
Wow - ページを下へスクロールすると CSS アニメーションを表示。
Scrollreveal - 要素がビューへスクロールインする際にアニメーション。
ScrollMagic - 魔法のようなスクロール対話性のための JavaScript ライブラリ。
Motus - スクロール時に CSS keyframes を模倣するアニメーションライブラリ。
Sal - パフォーマンス重視の軽量スクロールアニメーションライブラリ。

テキスト

Malarkey - vanilla JavaScript でタイプライター効果をシミュレート。
Typed.js - JavaScript Typing Animation Library。
Shuffle-text - Flash の素敵な遺産のような JavaScript テキスト効果ライブラリ。
Typebot - タイピングアニメーション用 JavaScript ライブラリ。
Blotter - Web 上で型破りなテキスト効果を描画する JavaScript API。

React

Motion - React 向けオープンソース・本番対応アニメーション・ジェスチャーライブラリ。
SVGR - SVG を React コンポーネントへ変換。
React tsParticles - tsParticles 用 ReactJS ラッパー
React spring - 補間をサポートする React 向け、オープンソースの spring-physics ベースアニメーションライブラリ。高速で使いやすい。

GUI ツール

Svgartista - SVG 画像の stroke・fill プロパティをプレーン CSS コードでアニメーションする支援ツール。path、line、polyline、rect、circle、ellipse、polygon 要素で動作しますが、SVG gradients はアニメーションできません。
Mantra - Web アニメーション用タイムライン編集ツール。Adobe Flash・After Effects などに着想を得ています。
Animista - 事前作成済み css アニメーションのコレクションを試し、調整し、実際に使うものだけを取得できる場所。
Cssanimate - デスクトップソフトウェアなしにブラウザー内で CSS3 keyframes animation を簡単・高速に作るツール。コーディングなしで複雑な CSS3 keyframe animation と、サイトで使える完成 css styles を作成できます。
Ceaser - モダンブラウザーすべてで CSS transitions を使える今、それらを美しくするツール。Flash・jQuery のクラシック Penner equations の多くを含みます。cubic-bezier は大きな可能性を持つものの使いにくかった問題を解決。タッチ端末にも対応！
Cubic Bezier - Bezier curves 作成用の優れたユーティリティ。ライブラリとの曲線インポート・エクスポートで他者と共有できます。
Keyframer - アニメーションコンポーネントを可視化し、必要なコードを出力するツール。
CSS Animation Kit - 上部パネルから事前定義サンプルを選択。下には左から右へ 0%〜100% の101 keyframes を持つ @keyframes タイムラインがあります。ハイライトした keyframe はその地点にスタイルが設定済みで、新しいスタイルも追加できます。

書籍

SVG animation

SVG は HTTP リクエスト数が少なく、どのディスプレイでも鮮明で、極めて強力です。レスポンシブアニメーションとパフォーマンス上の利点を探るほど興味深くなります。SVG をアニメーションする際は、構図、色、実装、最適化など通常の画像特性を意識する必要がありますが、アニメーションは各要因の複雑さを飛躍的に高めます。

Creating Web Animations: Bringing Your UIs to Life

高速なブラウザー、より良い Web 標準サポート、強力なデバイスにより、Web は楽しく実用的で流動的、記憶に残る次世代 UI を定義します。鍵はアニメーションです。しかしアニメーション作成の学習は難しく、既存教材はアニメーションが解決する UI 問題の文脈を説明していません。この本がその役割を担います。

Transitions and Animations in CSS: Adding Motion with CSS

Web アプリケーションに生命・奥行きを加え、CSS トランジション・アニメーションの控えめな利用で UX を改善します。この簡潔なガイドは、ボールの現実的なバウンド、ドロップダウンの段階的な展開、ホバー時の要素への注意喚起など、ページ要素の移動・外観変更方法を教えます。

Designing Interface Animation: Meaningful Motion for User Experience

効果的なインターフェイスアニメーションは、フィードバック改善、方向付け支援、注意の誘導、因果関係の提示、ブランドの個性表現のため、形と機能を巧みに組み合わせます。本書は目的・スタイルのバランスを取り、ユーザー体験へシームレスに溶け込む Web アニメーションの作り方を示します。Web デザイナー、UX 専門家、フロントエンド開発者向けのモーションデザイン理論・実践の速習書です。

Web Animation using JavaScript: Develop & Design

点滅するバナー広告やスクロールニュースティッカーの時代から大きく進みました。現在の iOS・Android の優れたモーションデザインは、体験を損なうのでなく劇的に改善します。今日の最良のサイト・アプリは、インターフェイスの感触・直感性を改善するためアニメーションを活用し、アニメーションのないサイトは時代遅れに見え始めています。本書は、視覚的に優れ、プログラムで保守できる方法でアニメーションを実装する技術的基盤を提供します。

CSS Animations and Transitions for the Modern Web

モダンな Web サイトは、ユーザビリティを高め、ユーザーを楽しませ驚かせるために多様なアニメーション効果を使います。一部は複雑なスクリプト・プログラミングを必要としますが、多くは CSS・HTML に慣れたデザイナーの手に届きます。本書は CSS3 スタイル定義で時間とともに Web ページへ動きを加える方法を示します。

Animation in HTML, CSS, and JavaScript

実用的・使いやすく、とてもクールな HTML、CSS、JavaScript アニメーションを作る助けとなる本です。各章には明快な概念説明、美しい図、カラフルなコードスニペット、友人をうめかせる一行ネタが詰まっています。まず CSS のアニメーション・トランジションを学び、終盤では DOM 要素操作と canvas へのピクセル描画による JavaScript アニメーションを学びます。

Foundation HTML5 Animation with JavaScript

本書は HTML5 canvas による動的スクリプトアニメーション作成に必要なすべてを扱います。関連する数学の後に、加速度、速度、easing、ばね、衝突検出、運動量保存、3D、順運動学・逆運動学などの物理概念を説明します。HTML5 に取り組む、または Flash から移行してモダンブラウザーと大多数のモバイル端末（iPhone、iPad、Android）で動く標準準拠のゲーム、アプリケーション、アニメーションを作るすべての Web 開発者向け優れたリソースです。

動画

Yuri Artyukh youtube channel - 各種技術による素晴らしい Web アニメーションを作り、そのすべてを steam 形式で記録するチャンネル。