やりたかったこと
スクロールしたらfadeinする簡易なアニメーションの設置
方法
一定の位置にスクロールしたらdata属性の中身を変えてCSSに変化をつける
やること
yarn
yarn add scrollmagic
コード
scrollMagic.js
importScrollMagicfrom'scrollmagic';classScrollFade{constructor(){this.ANIMATION_DATA='data-fadein-animation';constdefaultDataType=`[${this.ANIMATION_DATA}="false"]`;const$section=document.querySelectorAll(defaultDataType);if($section.length===null){return;}constcontroller=newScrollMagic.Controller();for(leti=0;i<$section.length;i++){constscene=newScrollMagic.Scene({triggerElement:$section[i],triggerHook:'onEnter',reverse:false,offset:400,}).addTo(controller);scene.on('enter',()=>{$section[i].setAttribute(this.ANIMATION_DATA,true);});scene.on('end',()=>{scene.destroy(true);});}}}// eslint-disable-next-line no-newnewScrollFade();u-scroll-magic.scss
.u-scroll-magic{&--fadein{opacity:0;transition:all1scubic-bezier(0.155,0.91,0.695,0.95);&[data-fadein-animation='true']{opacity:1;}}}感謝 & 参考
LIG様
ScrollMagicで簡単実装！「ふわっ」と文字が現れるスクロールアニメーション
https://liginc.co.jp/357845