はじめに

初めて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だとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。