clip-path-transitions.mjs

clip-path-transitions.mjs

import { linear } from 'https://cdn.jsdelivr.net/npm/svelte@3.50.1/easing/index.mjs';

function point(x, y) {
	return {
		x, 
		y,
	};
}

function polygon(edges) {
	return edges.map(({ x, y }) => `${x} ${y}`).join(`, `);
}

export function spotLight(node, { duration = 300, easing = linear}) {
	function css(t) {
		let circle;

		if(t <= 0.25) {
			circle = `circle(20% at ${492 * t - 30}% ${124 * t + 20}%)`;
		} else if(t <= 0.5) {
			circle = `circle(20% at ${- 324 * t + 174}% ${132 * t + 18}%)`;
		} else if(t <= 0.75) {
			circle = `circle(20% at ${152 * t - 64}% ${-136 * t + 152}%)`;
		} else {
			circle = `circle(${320 * t -220}% at 50% 50%)`;
		}
	
		return `
      clip-path: ${circle};
    `;
	}
	
	return {
		easing,
		duration,
		css,
	}
}


export function boxWipe(node, { duration = 300, easing = linear}) {
	function css(t) {
		let inset;

		if(t <= 0.5) {
			inset = `inset(25% ${100 - 200 * t}% 25% ${200 * t - 50}%)`;
		} else {
			inset = `inset(${50 - 50 * t}% 0% ${50 - 50 * t}% ${100 - 100 * t}%)`;
		}
		
		return `
      clip-path: ${inset};
    `;
	}
	
	return {
		easing,
		duration,
		css,
	}
}

export function grow(node, { duration = 300, easing = linear }) {	
	return {
		duration,
		easing,
		css: t => `
			clip-path: inset(${50 * (1 - t) }% round ${50 * (1 - t) }%);
		`,
	}
}

export function circle(node, { duration = 300, easing = linear }) {	
	return {
		duration,
		easing,
		css: t => `
			clip-path: circle(${t * 80 + 2}%);
		`,
	}
}


export function ellipse(node, { duration = 300, easing = linear }) {
	return {
		easing,
		duration,
		css: t => `
			clip-path: ellipse(${t * 50}% ${t * 80}%);
		`,
	}
}

export function slideUp(node, { duration = 300, easing = linear }) {
	return {
		easing,
		duration,
		css: t => `
			clip-path: inset(${(1 - t) * 100}% 0 0 0);
		`,
	}
}

export function slideDown(node, { duration = 300, easing = linear }) {
	return {
		easing,
		duration,
		css: t => `
			clip-path: inset(0 0 ${(1 - t) * 100}% 0);
		`,
	}
}

export function rhombus(node, { duration = 300, easing = linear}) {
	function css(t) {
		const from50To0 = `${(1 - t) * 50}%`;
		const from50To100 = `${(1 + t) * 50}%`;

		const edges = [
			point('50%', from50To0),
			point(from50To100, '50%'),
			point('50%', from50To100),
			point(from50To0, '50%'),
		];
	
		return `
      clip-path: polygon(${polygon(edges)});
    `;
	}
	
	return {
		easing,
		duration,
		css,
	}
}

export function cross(node, { duration = 300, easing = linear}) {
	function css(t, u) {
		const from0To50 = `${50 * u}%`;
		const from50To0 = `${(1 - u) * 50}%`;
		const from50To100 = `${(1 + u) * 50}%`;
		const from100To50 = `${ -50 * u + 100}%`;
		const from0To25 = `${u * 25}%`;
		 const from100To75 = `${-25 * u + 100}%`;
		
		const edges = [
			point(from0To50, from0To50), 
			point('50%', from0To25),
			point(from100To50, from0To50),
			point(from100To75, '50%'),
			point(from100To50, from100To50),
			point('50%', from100To75),
			point(from0To50, from100To50),
			point(from0To25, '50%')
	  ];
	
		return `
      clip-path: polygon(${polygon(edges)});
    `;
	}
	
	return {
		easing,
		duration,
		css,
	}
}