CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは
BRANK

2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。

ics.media
Related Topics: CSS Web Standards / Browsers
2 comments
  • 池田 泰延
    @clockmaker

    CSS のアニメーショントリガーは、逆スクロール時に逆再生するのがネック。

    GSAPだと、逆スクロール時におとなしく演出しない制御が可能。

  • 池田 泰延
    @clockmaker

    例によって解説記事はこちら。
    → ics.media/entry/230718/

    ■ポイント
    ・CSSのanimation-triggerなら、JS要らずで作れる
    ・ただし、ブラウザはChrome系のみ

    ・たいしてJSライブラリgsapなら全ブラウザで動作する
    ・gsapなら高機能でいかなる演出も制作可能