はじめに

初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。

実装方法

anime

  //$target = document.querySelector(TARGET);
  scroll($target) {
    const $window = window.document.scrollingElement || window.document.body || window.document.documentElement;
    anime({
      targets: { scroll: $window.scrollTop },
      scroll: $target.offsetTop,
      duration: 500,
      easing: 'easeInOutQuart',
      update: (a) => {
        $window.scrollTop = a.animations[0].currentValue;
      }
    });
  }

velocity

  //$target = document.querySelector(TARGET);
  scroll($target) {
    velocity($target, 'scroll');
  }

終わりに

他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。