Accessibility in GSAP

Respecting user motion preferences and creating inclusive animations

Detecting motion preferences...

Basic Animation

Animate Me

This element respects your motion preferences

Hover Effects

Hover Over Me

Hover animations are preserved but may be reduced

Scroll Animations

Scroll Triggered

Scroll animations respect motion preferences

Complex Animation

Complex Effect

Multi-step animations adapt to motion settings

    // Check for reduced motion preference

    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Conditionally run animations

    if (!prefersReducedMotion) {

      gsap.to('.element', {

        opacity: 0,

        y: 50,

        duration: 1

      });

    }