Skip to content
Telescope

Animated illustrations

How to use animated illustrations in an accessible way.

When using animations, it is important to consider users with motion sensitivity. This can be done by detecting if the user prefers reduced motion and adjusting the animation accordingly:

import Lottie from 'lottie-react'
import {useReducedMotion} from 'framer-motion'
import boat from '@pleo-io/telescope-animated-illustrations/lottie/boat.json'

const MyComponent = () => {
    const shouldReduceMotion = useReducedMotion()
    return <Lottie animationData={boat} autoplay={!shouldReduceMotion} loop />
}
Information:

Please see our motion guidelines for more information about accessible animations.