fly() — svelte Function Reference

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

Function javascript AnimationLibrary Transitions calls 1

Entity Profile

AnimationLibrary→ Transitions→ fly() — svelte Function Reference

Dependency Diagram

graph TD
  2ebfb46e_13fe_d693_c310_2dd05bee5fc0["fly()"]
  8795a504_2189_bf07_fb96_096bc8c92d25["index.js"]
  2ebfb46e_13fe_d693_c310_2dd05bee5fc0 -->|defined in| 8795a504_2189_bf07_fb96_096bc8c92d25
  489df91f_524a_a032_194d_cf9e45c790d7["split_css_unit()"]
  2ebfb46e_13fe_d693_c310_2dd05bee5fc0 -->|calls| 489df91f_524a_a032_194d_cf9e45c790d7
  style 2ebfb46e_13fe_d693_c310_2dd05bee5fc0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/transition/index.js lines 79–97

export function fly(
	node,
	{ delay = 0, duration = 400, easing = cubic_out, x = 0, y = 0, opacity = 0 } = {}
) {
	const style = getComputedStyle(node);
	const target_opacity = +style.opacity;
	const transform = style.transform === 'none' ? '' : style.transform;
	const od = target_opacity * (1 - opacity);
	const [x_value, x_unit] = split_css_unit(x);
	const [y_value, y_unit] = split_css_unit(y);
	return {
		delay,
		duration,
		easing,
		css: (t, u) => `
			transform: ${transform} translate(${(1 - t) * x_value}${x_unit}, ${(1 - t) * y_value}${y_unit});
			opacity: ${target_opacity - od * u}`
	};
}