Velocity.js 一時停止・再生機能に​ついて

Velocity.js、アニメーションさせる際にはCSS で動かすよりも圧倒的パフォーマンスを出すことで非常に便利なのですが、とある機能の日本語情報が見受けられなかったのでここに記載します！

一時停止 → 再生機能

stop()メソッドはあるのですが、いわゆる「一時停止 → 再生」するもののドキュメント情報が公式サイトがありませんでした（しかも stop()だと完全停止しちゃう）。

Github の Issue で「一時停止・再生機能つけてくれ頼む」という話はあったのですが、肝心の作者がやる気を喪失していたので、本人からの実装には期待が０になり、以下のようなテクニカルであまり汎用的ではない方法で一時停止・再生する機能をつけるようにやっていました。

See the Pen Velocity.js - Pause/Resume animation by William Lindner (@wlindner) on CodePen.

https://codepen.io/wlindner/pen/ykIzw

google 日本語検索でもそれに関する記事は見受けられませんでした。

しかし、１人の Contributior の活躍により 2016 年 11 月に一時停止・再生機能が実装されました。

実装例

$(function () {
  $('.hover').velocity(
    {
      scale: [1, 0.6],
    },
    {
      duration: 1500,
      complete: function () {
        $(this).velocity(
          {
            scale: [0.6, 1],
          },
          {
            duration: 1500,
            loop: true,
          },
        );
      },
    },
  );
  $('.hover').hover(
    function () {
      $(this).velocity('pause');
    },
    function () {
      $(this).velocity('resume');
    },
  );
});

デモ

https://jsfiddle.net/g09jkr80/1/

得られた教訓

公式ドキュメント、アップデート情報はちゃんと調べてちゃんと読もう！！！！！

以上学びでした。

余談ですが React 用の velocity.js プラグインがあります

https://github.com/twitter-fabric/velocity-react

おっきなとこが管理してるので安心 ☺