手書き風SVGアニメーションを簡単に実装できる「vivus.js」

 
手書き風SVGアニメーションを実装できる「vivus.js」が色々と活用できそうなので忘備録。アニメーションタイプもDelayed・Sync・OneByOneの3タイプ、Easing functionも用意されており、多彩なバリエーションのアニメーションを実装することができます。

vivus.js – svg animation


↓クリックでリスタート



  • あると便利なスクロールアニメーションライブラリ11選
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • ページをめくるようなエフェクトを実装できる「Page Flip Layout」
  • 【JS】物理法則に基づいたアニメーションライブラリ「Dynamics.js」
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
RELATED POSTS
  • 【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」
  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
  • 【2020年版】Google Fontsの使い方とおすすめ日本語フォント
  • 10年前の有名サイトを振り返ることができる「Ten Years Ago」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
  • 【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • CSSで作成する吹き出しとデザインのアイデア
  • 【2020年版】無料で使えるフリーイラスト素材サイト32選(商用利用可)