p-slides/css/effects.css

Presentations made simple with Web Components

@property --fragment-progress {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

:root {
	--overshoot: linear(0, 1.32 16%, 0.87 28%, 1.05 44%, 0.98 59%, 1.01 73%, 1 88%, 1);
	--bounce: linear(
		0,
		0.004,
		0.016,
		0.035,
		0.063,
		0.098,
		0.141 13.6%,
		0.25,
		0.391,
		0.563,
		0.765,
		1,
		0.891 40.9%,
		0.848,
		0.813,
		0.785,
		0.766,
		0.754,
		0.75,
		0.754,
		0.766,
		0.785,
		0.813,
		0.848,
		0.891 68.2%,
		1 72.7%,
		0.973,
		0.953,
		0.941,
		0.938,
		0.941,
		0.953,
		0.973,
		1,
		0.988,
		0.984,
		0.988,
		1
	);
}

[p-effect]:is(p-fragment, [p-fragment]) {
	opacity: initial;
}
[p-effect]:where(p-fragment, [p-fragment], :not(p-fragment *, [p-fragment] *)) {
	transition: --fragment-progress var(--fragment-duration);
}

[p-effect][aria-hidden='true']:where(p-fragment, [p-fragment]),
[p-effect]:not(p-fragment, [p-fragment], p-fragment *, [p-fragment] *):is([aria-hidden='true'] *) {
	--fragment-progress: 0;
}
[p-effect][aria-hidden='false']:where(p-fragment, [p-fragment]),
[p-effect]:not(p-fragment, [p-fragment], p-fragment *, [p-fragment] *):not([aria-hidden='true'] *),
:is([mode='speaker'] p-slide[aria-hidden='true'], [mode='grid']) [p-effect] {
	--fragment-progress: 1;
}

[p-effect]:not(p-fragment, [p-fragment], p-fragment *, [p-fragment] *) {
	transition-delay: var(--sliding-duration, 0s);
}
:is([mode='speaker'] p-slide[aria-hidden='true'], [mode='grid']) [p-effect] {
	transition-duration: 0s;
	transition-delay: 0s;
}

[p-effect][p-effect~='fade'] {
	opacity: calc(var(--fade-from, 0) + var(--fragment-progress) * (var(--fade-to, 1) - var(--fade-from, 0)));
}
[p-effect~='zoom'] {
	scale: calc(var(--scale-from, 0) + var(--fragment-progress) * (var(--scale-to, 1) - var(--scale-from, 0)));
}
[p-effect~='spin'] {
	rotate: calc(var(--angle-from, 0deg) + var(--fragment-progress) * (var(--angle-to, 3turn) - var(--angle-from, 0deg)));
}

/**** reveal ****/
[p-effect~='reveal'] {
	transition-property: --fragment-progress, padding-inline, margin-inline, border-inline-width, overflow;
	display: inline-block;
	min-width: 0;
	transition-behavior: allow-discrete;
}
@supports (width: calc-size(auto, size)) {
	[p-effect~='reveal'] {
		width: calc-size(auto, size * var(--fragment-progress));
	}
}
@supports not (width: calc-size(auto, size)) {
	[p-effect~='reveal'] {
		max-width: calc(var(--width, 100vw) * var(--fragment-progress));
	}
}

[p-effect~='reveal']:is(p-fragment, [p-fragment])[aria-hidden='true'],
[p-effect~='reveal']:not(p-fragment, [p-fragment]):is([aria-hidden='true'] *) {
	padding-inline: 0;
	margin-inline: 0;
	border-inline-width: 0;
	overflow: clip;
}

/**** insert ****/
[p-effect~='insert'] {
	transition-property: --fragment-progress, padding-block, margin-block, border-block-width, overflow;
	display: block;
	min-height: 0;
	transition-behavior: allow-discrete;
}
@supports (height: calc-size(auto, size)) {
	[p-effect~='insert'] {
		height: calc-size(auto, size * var(--fragment-progress));
	}
}
@supports not (height: calc-size(auto, size)) {
	[p-effect~='insert'] {
		max-height: calc(var(--height, 100vh) * var(--fragment-progress));
	}
}

[p-effect~='insert']:is(p-fragment, [p-fragment])[aria-hidden='true'],
[p-effect~='insert']:not(p-fragment, [p-fragment]):is([aria-hidden='true'] *) {
	padding-block: 0;
	margin-block: 0;
	border-block-width: 0;
	overflow: clip;
}

/**** strike ****/
[p-effect~='strike'] {
	display: inline-block;
}
[p-effect~='strike']::before {
	content: '';
	display: inline-block;
	padding-inline: 0 calc(100% * var(--fragment-progress));
	margin-inline: 0 calc(-100% * var(--fragment-progress));
	background: linear-gradient(0deg, var(--effect-color, red) 0 100%);
	height: var(--strike-width, 0.2em);
	vertical-align: calc(0.5ex - var(--strike-width, 0.2em) / 2);
	isolation: isolate;
}
[p-effect~='strike'][p-initially-visible]::before {
	margin-inline: calc(100% * (1 - var(--fragment-progress))) -100%;
}

[p-effect~='highlight'] {
	padding: var(--highlight-expand, 0.1em);
	margin: calc(0em - var(--highlight-expand, 0.1em));
	background: linear-gradient(color-mix(in srgb, var(--effect-color, oklch(0.6 0.1 80deg)), transparent var(--highlight-transparency, 50%)))
		0 / calc(100% * var(--fragment-progress)) auto no-repeat;
}

[p-effect~='red'] {
	--effect-color: red;
}
[p-effect~='blue'] {
	--effect-color: oklch(0.6 0.1 240deg);
}
[p-effect~='green'] {
	--effect-color: oklch(0.6 0.1 160deg);
}
[p-effect~='yellow'] {
	--effect-color: oklch(0.6 0.1 80deg);
}

[p-effect~='drawing'] {
	stroke-dasharray: calc(var(--length, 100px) * var(--fragment-progress)) var(--length, 100px);
}

/**** move/from ****/
[p-effect~='from'],
[p-effect~='move'] {
	translate: calc(var(--from-x, 0px) + var(--fragment-progress) * (var(--to-x, 0px) - var(--from-x, 0px)))
		calc(var(--from-y, 0px) + var(--fragment-progress) * (var(--to-y, 0px) - var(--from-y, 0px)));
}

[p-effect~='above'] {
	--from-y: -100cqh;
}

[p-effect~='right'],
[p-effect~='start']:dir(rtl),
[p-effect~='end']:dir(ltr) {
	--from-x: 100cqw;
}

[p-effect~='below'] {
	--from-y: 100cqh;
}

[p-effect~='left'],
[p-effect~='start']:dir(ltr),
[p-effect~='end']:dir(rtl) {
	--from-x: -100cqw;
}

[p-effect~='dropping'] {
	transition-timing-function: var(--bounce);
}
[p-effect~='boing'] {
	transition-timing-function: var(--overshoot);
}

@supports (x: attr(x type(<time>))) {
	[p-effect][p-delay] {
		transition-delay: calc(var(--fragment-duration) * attr(p-delay type(<number>)));
	}
	[p-effect][p-delay]:not(p-fragment, [p-fragment], p-fragment *, [p-fragment] *) {
		transition-delay: calc(var(--fragment-duration) * attr(p-delay type(<number>)) + var(--sliding-duration, 0s));
	}
	[p-effect][p-duration] {
		transition-duration: calc(var(--fragment-duration) * attr(p-duration type(<number>)));
	}
}