scale() — svelte Function Reference

Architecture documentation for the scale() function in index.js from the svelte codebase.

Function javascript AnimationLibrary Transitions called by 1

Entity Profile

AnimationLibrary→ Transitions→ scale() — svelte Function Reference

Dependency Diagram

graph TD
  c9f56dd5_0c46_3ac0_796e_a7f2fd0a79d2["scale()"]
  8795a504_2189_bf07_fb96_096bc8c92d25["index.js"]
  c9f56dd5_0c46_3ac0_796e_a7f2fd0a79d2 -->|defined in| 8795a504_2189_bf07_fb96_096bc8c92d25
  4514c186_c690_d916_c504_fca730b3f4ce["crossfade()"]
  4514c186_c690_d916_c504_fca730b3f4ce -->|calls| c9f56dd5_0c46_3ac0_796e_a7f2fd0a79d2
  style c9f56dd5_0c46_3ac0_796e_a7f2fd0a79d2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/transition/index.js lines 159–177

export function scale(
	node,
	{ delay = 0, duration = 400, easing = cubic_out, start = 0, opacity = 0 } = {}
) {
	const style = getComputedStyle(node);
	const target_opacity = +style.opacity;
	const transform = style.transform === 'none' ? '' : style.transform;
	const sd = 1 - start;
	const od = target_opacity * (1 - opacity);
	return {
		delay,
		duration,
		easing,
		css: (_t, u) => `
			transform: ${transform} scale(${1 - sd * u});
			opacity: ${target_opacity - od * u}
		`
	};
}