Blog スタッフブログ

とあるプロジェクトでページ内のアニメーションやスクロール連動表現で多用される GSAP ScrollTrigger を導入したところ、スクロールアニメーションが思うように動かないという問題に直面しました。

スクロールが常にスローモーションになるという問題です。

検証の結果、一緒に使っていた「Bootstrap 5.3」の影響を受けていることが判明しました。

bootstrap.cssの中次の行があります。

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

これがjsライブラリの処理に影響及ぼしていました。

この行を削除することで意図した挙動にすることができました。