Reduced Motion Hero Demo
Works/
Released: 2026/5
ReactとGSAPを使用して、reduced motionに対応したヒーローアニメーションのデモを制作しました。
OSの「視差効果を減らす」設定を考慮し、通常時は動きのあるアニメーション、reduced motion有効時は大きな移動を抑えた表示に切り替わるよう実装しています。
また、OS設定と画面上のトグル操作を共存させ、ユーザーの環境設定を優先しながら挙動を確認できる構成にしました。
実装では、CSSで初期表示を担保したうえで、GSAPは装飾的なアニメーション制御に使用しています。
これにより、JavaScriptの読み込み前後でも表示が破綻しにくく、アニメーションに依存しすぎない構成を意識しました。
reduced motion対応やGSAPの実装構成・状態管理については、Zennの記事にて紹介しています。
GitHubリポジトリ
https://github.com/Saya-such/reduced-motion-hero-demo解説 (技術記事)
Zenn | React × GSAPでreduced motionに対応する方法使用技術
- Library: React
- Styling: SCSS
- Animation: GSAP
- Build Tool: Vite
- Deploy / Hosting: Netlify
Contact お問い合わせ
Webサイトの実装についてお困りの際は、
まずはお気軽にご相談ください。
お仕事のご依頼の他、
外部パートナーとしてのお誘いなども含め
ぜひご連絡いただけると嬉しいです。
