astro/dist/transitions/index.js

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.

const EASE_IN_OUT_QUART = "cubic-bezier(0.76, 0, 0.24, 1)";
export function slide({ duration } = {}) {
	return {
		forwards: {
			old: [{
				name: "astroFadeOut",
				duration: duration ?? "90ms",
				easing: EASE_IN_OUT_QUART,
				fillMode: "both"
			}, {
				name: "astroSlideToLeft",
				duration: duration ?? "220ms",
				easing: EASE_IN_OUT_QUART,
				fillMode: "both"
			}],
			new: [{
				name: "astroFadeIn",
				duration: duration ?? "210ms",
				easing: EASE_IN_OUT_QUART,
				delay: duration ? undefined : "30ms",
				fillMode: "both"
			}, {
				name: "astroSlideFromRight",
				duration: duration ?? "220ms",
				easing: EASE_IN_OUT_QUART,
				fillMode: "both"
			}]
		},
		backwards: {
			old: [{ name: "astroFadeOut" }, { name: "astroSlideToRight" }],
			new: [{ name: "astroFadeIn" }, { name: "astroSlideFromLeft" }]
		}
	};
}
export function fade({ duration } = {}) {
	const anim = {
		old: {
			name: "astroFadeOut",
			duration: duration ?? 180,
			easing: EASE_IN_OUT_QUART,
			fillMode: "both"
		},
		new: {
			name: "astroFadeIn",
			duration: duration ?? 180,
			easing: EASE_IN_OUT_QUART,
			fillMode: "both"
		}
	};
	return {
		forwards: anim,
		backwards: anim
	};
}