Accessibility

Make nanime animations jump to their end state for visitors who turn on reduced motion.

Follow the reduced motion setting

Set reducedMotion to 'system' in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nanime'],
  nanime: {
    reducedMotion: 'system',
  },
})

When a visitor turns on reduced motion in their system settings, each animation jumps to its end state instead of playing. This applies to:

• useAnimate, useWaapiAnimate, useAnimeTimeline, useAnimatable and useScrambleText
• <AnimeTransition> and <AnimeTransitionGroup>
• <AnimeLayoutGroup> and useAnimeLayout

<AnimeTransitionGroup> also skips moves, so it measures nothing. <AnimeLayoutGroup> and useAnimeLayout measure once on mount and not after.

useDraggable and useAnimeScroll are not affected. They follow the pointer and the scroll position, which the visitor controls.

Let visitors choose in your app

Set reducedMotion in the app config to override nuxt.config.ts. Call updateAppConfig() to change it at runtime, for example from a settings toggle:

<script setup lang="ts">
function setReducedMotion(reduce: boolean) {
  updateAppConfig({ nanime: { reducedMotion: reduce ? 'always' : 'system' } })
}
</script>

Transitions and groups use the new setting on their next run. An animation from a composable keeps its timing until it rebuilds.