Chapter 390: Accessible Animation

Core Idea

Quick Start - gsap.matchMedia()

Code Examples

// create a matchMedia object
let mm = gsap.matchMedia()

// only add animations if the user is ok with motion!
mm.add("(prefers-reduced-motion: no-preference)", (context) => {
  // This animation will not run if the user has opted out of animation at the OS level
  gsap.to(".box", {
    rotation: 360,
    repeat: -1,
  });

});

• What it demonstrates: typical usage of Accessible Animation in a GSAP animation.

Key Takeaways

1. Quick Start - gsap.matchMedia()

Connects To

• gsap.matchMedia().: see ch022 — gsap.matchMedia()