Created
September 15, 2022 14:55
-
-
Save FaberVitale/ac6e1a97f1d577b977518216ce04b033 to your computer and use it in GitHub Desktop.
clip-path-transitions.mjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { linear } from 'https://cdn.jsdelivr.net/npm/[email protected]/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, | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment