SlideIn.svelte

SlideIn.svelte

import { quintOut } from 'svelte/easing';

/** @param {number | string} value
 * @returns {[number, string]}
 */
function split_css_unit(value) {
	const split = typeof value === 'string' && value.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
	return split ? [parseFloat(split[1]), split[2] || 'px'] : [/** @type {number} */ (value), 'px'];
}
export { split_css_unit };


function slideIn(
		node: Element,
		{
			duration,
			from = 'right'
		}: {
			duration: number;
			from?: 'top' | 'right' | 'bottom' | 'left';
		}
	) {
		return {
			duration,
			css: (t: number) => {
				const eased = quintOut(t);
				const scale = 0.5 + eased * 0.5;
				const style = getComputedStyle(node);
				const transform = style.transform === 'none' ? '' : style.transform;

				const [endPosition, unit] = split_css_unit(style[from]);
				const [size, _] = split_css_unit(
					from === 'left' || from === 'right' ? style.width : style.height
				);
				const translate = from === 'top' || from === 'bottom' ? 'translateY' : 'translateX';
				const offset =
					from === 'top' || from === 'left'
						? -(1 - eased) * (size + endPosition)
						: (1 - eased) * (size + endPosition);

				return `
						transform: ${transform} scale(${scale}) ${translate}(${offset}${unit});
						transform-origin: ${from};
					`;
			}
		};
	}