safe-view-transition

Use the awesome View Transitions API safely, without needing to worry about whether it's available, or whether the user prefers reduced motion

Installation

npm i safe-view-transition

Usage

You can use this almost the same way as document.startViewTransition:

import { safeViewTransition } from 'safe-view-transition'

safeViewTransition(
  () => {
    // do the dom changes
  },
  {
    /* options */
  }
)

options

• ignoreMotionPreference: when true, we'll try to do a transition even if the (prefers-reduced-motion: no-preference) media query isn't matched.

Vue 3

If you're using Vue, you should use the helper from safe-view-transition like so:

<script setup lang="ts">
import { safeViewTransition } from 'safe-view-transition/vue'

const updateState = () => {
  safeViewTransition(
    () => {
      // Update state here
    },
    {
      // This defaults to true, but you can change it to false
      useNextTick: true,
    }
  )
}
</script>

<template>
  <!-- your cool template -->
</template>

Extra options

• useNextTick. when true, after calling the provided callback, we'll wait for the current tick to complete before the transition starts. Defaults to true.

React

If you're using React, you should use the helper from safe-view-transition like so:

import { safeViewTransition } from 'safe-view-transition/react';

function Component() {
  const updateState = () => {
    safeViewTransition(() => {
      // Update state here
    })
  }

  return ( /* your cool JSX */ )
}

Warning
This helper uses flushSync, to force side effects for state updates (like updating the real DOM) to happen immediately, but it can hurt the performance of your app.

Examples

• Vanilla JS
• VueJS (3)
• React