flip() — svelte Function Reference

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

Function javascript AnimationLibrary Transitions calls 1

Entity Profile

AnimationLibrary→ Transitions→ flip() — svelte Function Reference

Dependency Diagram

graph TD
  06e9beb7_5a57_1400_1bcb_dd47dffa5975["flip()"]
  f6212c25_7a1e_6392_8ec8_309b3ffcc39d["index.js"]
  06e9beb7_5a57_1400_1bcb_dd47dffa5975 -->|defined in| f6212c25_7a1e_6392_8ec8_309b3ffcc39d
  7d2542cb_15f1_8840_167a_fedb0eb5a146["get_zoom()"]
  06e9beb7_5a57_1400_1bcb_dd47dffa5975 -->|calls| 7d2542cb_15f1_8840_167a_fedb0eb5a146
  style 06e9beb7_5a57_1400_1bcb_dd47dffa5975 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/animate/index.js lines 13–58

export function flip(node, { from, to }, params = {}) {
	var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;

	var style = getComputedStyle(node);

	// find the transform origin, expressed as a pair of values between 0 and 1
	var transform = style.transform === 'none' ? '' : style.transform;
	var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
	ox /= node.clientWidth;
	oy /= node.clientHeight;

	// calculate effect of parent transforms and zoom
	var zoom = get_zoom(node); // https://drafts.csswg.org/css-viewport/#effective-zoom
	var sx = node.clientWidth / to.width / zoom;
	var sy = node.clientHeight / to.height / zoom;

	// find the starting position of the transform origin
	var fx = from.left + from.width * ox;
	var fy = from.top + from.height * oy;

	// find the ending position of the transform origin
	var tx = to.left + to.width * ox;
	var ty = to.top + to.height * oy;

	// find the translation at the start of the transform
	var dx = (fx - tx) * sx;
	var dy = (fy - ty) * sy;

	// find the relative scale at the start of the transform
	var dsx = from.width / to.width;
	var dsy = from.height / to.height;

	return {
		delay,
		duration: typeof duration === 'function' ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
		easing,
		css: (t, u) => {
			var x = u * dx;
			var y = u * dy;
			var sx = t + u * dsx;
			var sy = t + u * dsy;

			return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
		}
	};
}