フレキシブル、軽量なアニメーションライブラリ「anime.js」

2016.07.04

フレキシブル、軽量なアニメーションライブラリを紹介します。

フレキシブルで軽量なアニメーションライブラリ「anime.js」
anime.js

anime.jsの紹介

anime.jsは、フレキシブル、軽量なアニメーション用JSライブラリです。

様々なアニメーションを実装することができます。

アニメーションのサンプル
anime.js

サンプル2
mgs anime.js logo

他にも、サンプルがあります。

anime.jsの使い方

ソースコードはGitHubで公開されています。

JS

anime.min.jsを読み込みます。

<script src="anime.min.js"></script>

ターゲット要素を指定して、スクリプトを実行します。

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: {
  value: 180,
  duration: 1500,
  easing: 'easeInOutQuad'
  },
  scale: {
  value: 2,
  delay: 150,
  duration: 850,
  easing: 'easeInOutExpo',
  },
  loop: true,
  direction: 'alternate'
});
http://codepen.io/juliangarnier/pen/MebKJp
codepen.io