astro-view-transition-script

A utility function to execute a callback that compatibly with Astro's view transitions.

Installation

# ✨ Auto-detect
npx nypm install astro-view-transition-script

# npm
npm install astro-view-transition-script

# yarn
yarn add astro-view-transition-script

# pnpm
pnpm add astro-view-transition-script

# bun
bun install astro-view-transition-script

# deno
deno install npm:astro-view-transition-script

Basic Usage

---
// ...
---

<script>
  import { withwithViewTransition } from 'astro-view-transition-script';

  withViewTransition({
    // ...
  })
</script>

Example

/**
 * apply theme on initial and navigating
 */
function applyTheme(state) {
  localStorage.theme === 'dark'
    ? state.document.documentElement.classList.add('dark')
    : state.document.documentElement.classList.remove('dark')
}

withViewTransition({
  initial: applyTheme,
  beforeSwap: applyTheme,
})

/**
 * avoid smooth scroll when navigating back/forward
 * @see https://github.com/withastro/astro/issues/10615#issuecomment-3289385496
 */
withViewTransition({
  beforeSwap(state, e) {
    state.document.documentElement.style.scrollBehavior
      = e.navigationType === 'traverse' ? 'auto' : 'smooth'
  },
  done(state) {
    state.document.documentElement.style.scrollBehavior = 'smooth'
  },
})

Contribution

• Clone this repository
• Install the latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run tests using pnpm dev or pnpm test

Sponsors

License

Published under the MIT license. Made by @byronogis and community 💛

🤖 auto updated with automd (last updated: Tue Oct 07 2025)