createAnimationScope() — astro Function Reference

Architecture documentation for the createAnimationScope() function in transition.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 2

Entity Profile

CoreAstro→ RenderingEngine→ createAnimationScope() — astro Function Reference

Dependency Diagram

graph TD
  0e4a1194_2bea_793e_79d2_5347fe13b7c1["createAnimationScope()"]
  f4a9c12d_07bd_6de6_237f_8553c55f6fef["transition.ts"]
  0e4a1194_2bea_793e_79d2_5347fe13b7c1 -->|defined in| f4a9c12d_07bd_6de6_237f_8553c55f6fef
  2527a613_a18b_f09f_d953_5ec7867c60a5["toString()"]
  0e4a1194_2bea_793e_79d2_5347fe13b7c1 -->|calls| 2527a613_a18b_f09f_d953_5ec7867c60a5
  b520ade9_7c6f_51cb_ea8f_301d3ddee8a7["addPairs()"]
  0e4a1194_2bea_793e_79d2_5347fe13b7c1 -->|calls| b520ade9_7c6f_51cb_ea8f_301d3ddee8a7
  style 0e4a1194_2bea_793e_79d2_5347fe13b7c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/transition.ts lines 119–130

export function createAnimationScope(
	transitionName: string,
	animations: Record<string, TransitionAnimationPair>,
) {
	const hash = Math.random().toString(36).slice(2, 8);
	const scope = `astro-${hash}`;
	const sheet = new ViewTransitionStyleSheet(scope, transitionName);

	addPairs(animations, sheet);

	return { scope, styles: sheet.toString().replaceAll('"', '') };
}