<aside>
			<form id="app">
				<button type="button" id="play">Re-Play</button>

				<fieldset name="demo">
					<legend>CSS Transition Editor</legend>
					<label>
						Transition
						<select>
							<option value="">none</option>
							<optgroup label="fade">
								<option value="trs-fdd">fade-down</option>
								<option value="trs-fdl">fade-down-left</option>
								<option value="trs-fdr">fade-down-right</option>
								<option value="trs-fal">fade-left</option>
								<option value="trs-far">fade-right</option>
								<option value="trs-fau">fade-up</option>
								<option value="trs-ful">fade-up-left</option>
								<option value="trs-fur">fade-up-right</option>
							</optgroup>
							<optgroup label="flip">
								<option value="trs-fld">flip-down</option>
								<option value="trs-fll">flip-left</option>
								<option value="trs-flr">flip-right</option>
								<option value="trs-flu">flip-up</option>
							</optgroup>
							<optgroup label="zoom">
								<option value="trs-zoi">zoom-in</option>
								<option value="trs-zod">zoom-in-down</option>
								<option value="trs-ziu">zoom-in-up</option>
								<option value="trs-zoo">zoom-out</option>
							</optgroup>
						</select>
					</label>
					<label>
						Easing
						<select>
							<optgroup label="ease">
								<option value="trstf-eas-1" selected>ease-1</option>
								<option value="trstf-eas-2">ease-2</option>
								<option value="trstf-eas-3">ease-3</option>
								<option value="trstf-eas-4">ease-4</option>
								<option value="trstf-eas-5">ease-5</option>
							</optgroup>
							<optgroup label="ease-in">
								<option value="trstf-eai-1">ease-in-1</option>
								<option value="trstf-eai-2">ease-in-2</option>
								<option value="trstf-eai-3">ease-in-3</option>
								<option value="trstf-eai-4">ease-in-4</option>
								<option value="trstf-eai-5">ease-in-5</option>
							</optgroup>
							<optgroup label="ease-out">
								<option value="trstf-eao-1">ease-out-1</option>
								<option value="trstf-eao-2">ease-out-2</option>
								<option value="trstf-eao-3">ease-out-3</option>
								<option value="trstf-eao-4">ease-out-4</option>
								<option value="trstf-eao-5">ease-out-5</option>
							</optgroup>
							<optgroup label="ease-in-out">
								<option value="trstf-eio-1">ease-in-out-1</option>
								<option value="trstf-eio-2">ease-in-out-2</option>
								<option value="trstf-eio-3">ease-in-out-3</option>
								<option value="trstf-eio-4">ease-in-out-4</option>
								<option value="trstf-eio-5">ease-in-out-5</option>
							</optgroup>
							<optgroup label="ease-elastic">
								<option value="trstf-eel-1">ease-elastic-1</option>
								<option value="trstf-eel-2">ease-elastic-2</option>
								<option value="trstf-eel-3">ease-elastic-3</option>
								<option value="trstf-eel-4">ease-elastic-4</option>
								<option value="trstf-eel-5">ease-elastic-5</option>
							</optgroup>
							<optgroup label="ease-squish">
								<option value="trstf-esq-1">ease-squish-1</option>
								<option value="trstf-esq-2">ease-squish-2</option>
								<option value="trstf-esq-3">ease-squish-3</option>
								<option value="trstf-esq-4">ease-squish-4</option>
								<option value="trstf-esq-5">ease-squish-5</option>
							</optgroup>
							<option>linear</option>
						</select>
					</label>
					<label>
						Duration
						<select>
							<option value="trsdu-100">100ms</option>
							<option value="trsdu-200">200ms</option>
							<option value="trsdu-300">300ms</option>
							<option value="trsdu-400" selected>400ms</option>
							<option value="trsdu-500">500ms</option>
							<option value="trsdu-750">750ms</option>
							<option value="trsdu-1000">1000ms</option>
							<option value="trsdu-1500">1500ms</option>
							<option value="trsdu-2000">2000ms</option>
						</select>
					</label>
					<label>
						Delay
						<select>
							<option value="trsde-0" selected>0ms</option>
							<option value="trsde-25">25ms</option>
							<option value="trsde-50">50ms</option>
							<option value="trsde-75">75ms</option>
							<option value="trsde-100">100ms</option>
							<option value="trsde-150">150ms</option>
							<option value="trsde-250">250ms</option>
							<option value="trsde-500">500ms</option>
							<option value="trsde-750">750ms</option>
							<option value="trsde-1000">1000ms</option>
							<option value="trsde-1500">1500ms</option>
							<option value="trsde-2000">2000ms</option>
						</select>
					</label>
				</fieldset>

				<fieldset name="demo1">
					<legend>Child 1</legend>
					<label>
						Transition
						<select>
							<option value="">none</option>
							<optgroup label="fade">
								<option value="trs-fdd">fade-down</option>
								<option value="trs-fdl">fade-down-left</option>
								<option value="trs-fdr">fade-down-right</option>
								<option value="trs-fal">fade-left</option>
								<option value="trs-far">fade-right</option>
								<option value="trs-fau">fade-up</option>
								<option value="trs-ful">fade-up-left</option>
								<option value="trs-fur">fade-up-right</option>
							</optgroup>
							<optgroup label="flip">
								<option value="trs-fld">flip-down</option>
								<option value="trs-fll">flip-left</option>
								<option value="trs-flr">flip-right</option>
								<option value="trs-flu">flip-up</option>
							</optgroup>
							<optgroup label="zoom">
								<option value="trs-zoi">zoom-in</option>
								<option value="trs-zod">zoom-in-down</option>
								<option value="trs-ziu">zoom-in-up</option>
								<option value="trs-zoo">zoom-out</option>
							</optgroup>
						</select>
					</label>
					<label>
						Easing
						<select>
							<option value="" selected>inherit</option>
							<optgroup label="ease">
								<option value="trstf-eas-1">ease-1</option>
								<option value="trstf-eas-2">ease-2</option>
								<option value="trstf-eas-3">ease-3</option>
								<option value="trstf-eas-4">ease-4</option>
								<option value="trstf-eas-5">ease-5</option>
							</optgroup>
							<optgroup label="ease-in">
								<option value="trstf-eai-1">ease-in-1</option>
								<option value="trstf-eai-2">ease-in-2</option>
								<option value="trstf-eai-3">ease-in-3</option>
								<option value="trstf-eai-4">ease-in-4</option>
								<option value="trstf-eai-5">ease-in-5</option>
							</optgroup>
							<optgroup label="ease-out">
								<option value="trstf-eao-1">ease-out-1</option>
								<option value="trstf-eao-2">ease-out-2</option>
								<option value="trstf-eao-3">ease-out-3</option>
								<option value="trstf-eao-4">ease-out-4</option>
								<option value="trstf-eao-5">ease-out-5</option>
							</optgroup>
							<optgroup label="ease-in-out">
								<option value="trstf-eio-1">ease-in-out-1</option>
								<option value="trstf-eio-2">ease-in-out-2</option>
								<option value="trstf-eio-3">ease-in-out-3</option>
								<option value="trstf-eio-4">ease-in-out-4</option>
								<option value="trstf-eio-5">ease-in-out-5</option>
							</optgroup>
							<optgroup label="ease-elastic">
								<option value="trstf-eel-1">ease-elastic-1</option>
								<option value="trstf-eel-2">ease-elastic-2</option>
								<option value="trstf-eel-3">ease-elastic-3</option>
								<option value="trstf-eel-4">ease-elastic-4</option>
								<option value="trstf-eel-5">ease-elastic-5</option>
							</optgroup>
							<optgroup label="ease-squish">
								<option value="trstf-esq-1">ease-squish-1</option>
								<option value="trstf-esq-2">ease-squish-2</option>
								<option value="trstf-esq-3">ease-squish-3</option>
								<option value="trstf-esq-4">ease-squish-4</option>
								<option value="trstf-esq-5">ease-squish-5</option>
							</optgroup>
							<option>linear</option>
						</select>
					</label>
					<label>
						Duration
						<select>
							<option value="" selected>inherit</option>
							<option value="trsdu-100">100ms</option>
							<option value="trsdu-200">200ms</option>
							<option value="trsdu-300">300ms</option>
							<option value="trsdu-400">400ms</option>
							<option value="trsdu-500">500ms</option>
							<option value="trsdu-750">750ms</option>
							<option value="trsdu-1000">1000ms</option>
							<option value="trsdu-1500">1500ms</option>
							<option value="trsdu-2000">2000ms</option>
						</select>
					</label>
					<label>
						Delay
						<select>
							<option value="trsde-0" selected>0ms</option>
							<option value="trsde-25">25ms</option>
							<option value="trsde-50">50ms</option>
							<option value="trsde-75">75ms</option>
							<option value="trsde-100">100ms</option>
							<option value="trsde-150">150ms</option>
							<option value="trsde-250">250ms</option>
							<option value="trsde-500">500ms</option>
							<option value="trsde-750">750ms</option>
							<option value="trsde-1000">1000ms</option>
							<option value="trsde-1500">1500ms</option>
							<option value="trsde-2000">2000ms</option>
						</select>
					</label>
				</fieldset>

				<fieldset name="demo2">
					<legend>Child 2</legend>
					<label>
						Transition
						<select>
							<option value="">none</option>
							<optgroup label="fade">
								<option value="trs-fdd">fade-down</option>
								<option value="trs-fdl">fade-down-left</option>
								<option value="trs-fdr">fade-down-right</option>
								<option value="trs-fal">fade-left</option>
								<option value="trs-far">fade-right</option>
								<option value="trs-fau">fade-up</option>
								<option value="trs-ful">fade-up-left</option>
								<option value="trs-fur">fade-up-right</option>
							</optgroup>
							<optgroup label="flip">
								<option value="trs-fld">flip-down</option>
								<option value="trs-fll">flip-left</option>
								<option value="trs-flr">flip-right</option>
								<option value="trs-flu">flip-up</option>
							</optgroup>
							<optgroup label="zoom">
								<option value="trs-zoi">zoom-in</option>
								<option value="trs-zod">zoom-in-down</option>
								<option value="trs-ziu">zoom-in-up</option>
								<option value="trs-zoo">zoom-out</option>
							</optgroup>
						</select>
					</label>
					<label>
						Easing
						<select>
							<option value="" selected>inherit</option>
							<optgroup label="ease">
								<option value="trstf-eas-1">ease-1</option>
								<option value="trstf-eas-2">ease-2</option>
								<option value="trstf-eas-3">ease-3</option>
								<option value="trstf-eas-4">ease-4</option>
								<option value="trstf-eas-5">ease-5</option>
							</optgroup>
							<optgroup label="ease-in">
								<option value="trstf-eai-1">ease-in-1</option>
								<option value="trstf-eai-2">ease-in-2</option>
								<option value="trstf-eai-3">ease-in-3</option>
								<option value="trstf-eai-4">ease-in-4</option>
								<option value="trstf-eai-5">ease-in-5</option>
							</optgroup>
							<optgroup label="ease-out">
								<option value="trstf-eao-1">ease-out-1</option>
								<option value="trstf-eao-2">ease-out-2</option>
								<option value="trstf-eao-3">ease-out-3</option>
								<option value="trstf-eao-4">ease-out-4</option>
								<option value="trstf-eao-5">ease-out-5</option>
							</optgroup>
							<optgroup label="ease-in-out">
								<option value="trstf-eio-1">ease-in-out-1</option>
								<option value="trstf-eio-2">ease-in-out-2</option>
								<option value="trstf-eio-3">ease-in-out-3</option>
								<option value="trstf-eio-4">ease-in-out-4</option>
								<option value="trstf-eio-5">ease-in-out-5</option>
							</optgroup>
							<optgroup label="ease-elastic">
								<option value="trstf-eel-1">ease-elastic-1</option>
								<option value="trstf-eel-2">ease-elastic-2</option>
								<option value="trstf-eel-3">ease-elastic-3</option>
								<option value="trstf-eel-4">ease-elastic-4</option>
								<option value="trstf-eel-5">ease-elastic-5</option>
							</optgroup>
							<optgroup label="ease-squish">
								<option value="trstf-esq-1">ease-squish-1</option>
								<option value="trstf-esq-2">ease-squish-2</option>
								<option value="trstf-esq-3">ease-squish-3</option>
								<option value="trstf-esq-4">ease-squish-4</option>
								<option value="trstf-esq-5">ease-squish-5</option>
							</optgroup>
							<option>linear</option>
						</select>
					</label>
					<label>
						Duration
						<select>
							<option value="" selected>inherit</option>
							<option value="trsdu-100">100ms</option>
							<option value="trsdu-200">200ms</option>
							<option value="trsdu-300">300ms</option>
							<option value="trsdu-400">400ms</option>
							<option value="trsdu-500">500ms</option>
							<option value="trsdu-750">750ms</option>
							<option value="trsdu-1000">1000ms</option>
							<option value="trsdu-1500">1500ms</option>
							<option value="trsdu-2000">2000ms</option>
						</select>
					</label>
					<label>
						Delay
						<select>
							<option value="trsde-0" selected>0ms</option>
							<option value="trsde-25">25ms</option>
							<option value="trsde-50">50ms</option>
							<option value="trsde-75">75ms</option>
							<option value="trsde-100">100ms</option>
							<option value="trsde-150">150ms</option>
							<option value="trsde-250">250ms</option>
							<option value="trsde-500">500ms</option>
							<option value="trsde-750">750ms</option>
							<option value="trsde-1000">1000ms</option>
							<option value="trsde-1500">1500ms</option>
							<option value="trsde-2000">2000ms</option>
						</select>
					</label>
				</fieldset>

				<fieldset name="demo3">
					<legend>Child 3</legend>
					<label>
						Transition
						<select>
							<option value="">none</option>
							<optgroup label="fade">
								<option value="trs-fdd">fade-down</option>
								<option value="trs-fdl">fade-down-left</option>
								<option value="trs-fdr">fade-down-right</option>
								<option value="trs-fal">fade-left</option>
								<option value="trs-far">fade-right</option>
								<option value="trs-fau">fade-up</option>
								<option value="trs-ful">fade-up-left</option>
								<option value="trs-fur">fade-up-right</option>
							</optgroup>
							<optgroup label="flip">
								<option value="trs-fld">flip-down</option>
								<option value="trs-fll">flip-left</option>
								<option value="trs-flr">flip-right</option>
								<option value="trs-flu">flip-up</option>
							</optgroup>
							<optgroup label="zoom">
								<option value="trs-zoi">zoom-in</option>
								<option value="trs-zod">zoom-in-down</option>
								<option value="trs-ziu">zoom-in-up</option>
								<option value="trs-zoo">zoom-out</option>
							</optgroup>
						</select>
					</label>
					<label>
						Easing
						<select>
							<option value="" selected>inherit</option>
							<optgroup label="ease">
								<option value="trstf-eas-1">ease-1</option>
								<option value="trstf-eas-2">ease-2</option>
								<option value="trstf-eas-3">ease-3</option>
								<option value="trstf-eas-4">ease-4</option>
								<option value="trstf-eas-5">ease-5</option>
							</optgroup>
							<optgroup label="ease-in">
								<option value="trstf-eai-1">ease-in-1</option>
								<option value="trstf-eai-2">ease-in-2</option>
								<option value="trstf-eai-3">ease-in-3</option>
								<option value="trstf-eai-4">ease-in-4</option>
								<option value="trstf-eai-5">ease-in-5</option>
							</optgroup>
							<optgroup label="ease-out">
								<option value="trstf-eao-1">ease-out-1</option>
								<option value="trstf-eao-2">ease-out-2</option>
								<option value="trstf-eao-3">ease-out-3</option>
								<option value="trstf-eao-4">ease-out-4</option>
								<option value="trstf-eao-5">ease-out-5</option>
							</optgroup>
							<optgroup label="ease-in-out">
								<option value="trstf-eio-1">ease-in-out-1</option>
								<option value="trstf-eio-2">ease-in-out-2</option>
								<option value="trstf-eio-3">ease-in-out-3</option>
								<option value="trstf-eio-4">ease-in-out-4</option>
								<option value="trstf-eio-5">ease-in-out-5</option>
							</optgroup>
							<optgroup label="ease-elastic">
								<option value="trstf-eel-1">ease-elastic-1</option>
								<option value="trstf-eel-2">ease-elastic-2</option>
								<option value="trstf-eel-3">ease-elastic-3</option>
								<option value="trstf-eel-4">ease-elastic-4</option>
								<option value="trstf-eel-5">ease-elastic-5</option>
							</optgroup>
							<optgroup label="ease-squish">
								<option value="trstf-esq-1">ease-squish-1</option>
								<option value="trstf-esq-2">ease-squish-2</option>
								<option value="trstf-esq-3">ease-squish-3</option>
								<option value="trstf-esq-4">ease-squish-4</option>
								<option value="trstf-esq-5">ease-squish-5</option>
							</optgroup>
							<option>linear</option>
						</select>
					</label>
					<label>
						Duration
						<select>
							<option value="" selected>inherit</option>
							<option value="trsdu-100">100ms</option>
							<option value="trsdu-200">200ms</option>
							<option value="trsdu-300">300ms</option>
							<option value="trsdu-400">400ms</option>
							<option value="trsdu-500">500ms</option>
							<option value="trsdu-750">750ms</option>
							<option value="trsdu-1000">1000ms</option>
							<option value="trsdu-1500">1500ms</option>
							<option value="trsdu-2000">2000ms</option>
						</select>
					</label>
					<label>
						Delay
						<select>
							<option value="trsde-0" selected>0ms</option>
							<option value="trsde-25">25ms</option>
							<option value="trsde-50">50ms</option>
							<option value="trsde-75">75ms</option>
							<option value="trsde-100">100ms</option>
							<option value="trsde-150">150ms</option>
							<option value="trsde-250">250ms</option>
							<option value="trsde-500">500ms</option>
							<option value="trsde-750">750ms</option>
							<option value="trsde-1000">1000ms</option>
							<option value="trsde-1500">1500ms</option>
							<option value="trsde-2000">2000ms</option>
						</select>
					</label>
				</fieldset>

				<fieldset>
					<legend>Variables</legend>
					<label>
						Zoom-in
						<input type="number" name="--zi" value="0.6" step="0.1" min="0.1" max="1" />
					</label>
					<label>
						Zoom-out
						<input type="number" name="--zo" value="1.2" step="0.1" min="1" max="5" />
					</label>
					<label>
						Translate X
						<input type="number" name="--tx" value="55" step="1" min="1" max="999" data-suffix="px" />
					</label>
					<label>
						Translate Y
						<input type="number" name="--ty" value="110" step="1" min="1" max="999" data-suffix="px" />
					</label>
				</fieldset>

			</form>
		</aside>

		<main>

<div id="demo">
	<div id="demo1">
		<img src="https://assets.stoumann.dk/img/color.jpg" />
	</div>
	<div id="demo2">
		<img src="https://assets.stoumann.dk/img/gallery01.jpg" />
	</div>
	<div id="demo3">
		<img src="https://assets.stoumann.dk/img/gallery04.jpg" />
	</div>
</div>

			<p><strong>How to use:</strong> Select a transition for the main wrapper or one of it's child-elements. Try to play around with individual transitions, easings, durations and delays.<br />
			At the bottom of the sidebar, you can edit <em>custom properties</em> for finer control of offset- and zoom-transitions.
			</p>
			<details>
				<summary>See code</summary>
				<pre id="code">Code here ...</pre>
			</details>
		</main>
/**
 * Transition Module
 * @version 1.0.35
 * @summary 09-05-2022
 * @author Mads Stoumann
 * @description Using `data-trs` attribute to handle transitions.
 * Credits to AOS: https://michalsnik.github.io/aos/ and Open Props: https://open-props.style/

 * Abbreviations:
 * .trs-:   transition-name
 * .trsde-: transition-delay
 * .trsdu-: transition-duration
 * .trstf-: transition-timing-function (easing)

 * To trigger a transition, add the class `trs` to the element.
 * You should only add the class to the *outermost* element with a `trs-`, children will be animated automatically.
*/

@import 'https://unpkg.com/[email protected]/src/props.easing.css';

:where([class*="trs-"]) {
	--dg: 100deg;
	--tx: 55px;
	--ty: 110px;
	--zi: 0.6;
	--zo: 1.2;
}

:is([class*="trs-"].trs) {
	opacity: 1;
	transform: translateZ(0) scale(1);
	transition: all var(--duration, 400ms) var(--delay, 0ms) var(--easing, var(--ease-1, ease));
}

:is(.trs [class*="trs-"]) {
	opacity: 1;
	transform: translateZ(0);
	transition-timing-function: var(--easing, ease-in-out);
	transition-delay: var(--delay, 0ms);
	transition-duration: var(--duration, 400ms);
}

/* .trs .trs-fld  { transform: perspective(2500px) rotate(0deg); }  */

/* TRANSITIONS */

/* FADE */
.trs-fdd { opacity: 0; transform: translate3d(0px, calc(-1 * var(--ty)), 0); }
.trs-fdl { opacity: 0; transform: translate3d(calc(-1 * var(--tx)), calc(-1 * var(--ty)), 0); }
.trs-fdr { opacity: 0; transform: translate3d(var(--tx), calc(-1 * var(--ty)), 0); }
.trs-fal { opacity: 0; transform: translate3d(calc(-1 * var(--tx)), 0px, 0); }
.trs-far { opacity: 0; transform: translate3d(var(--tx), 0px, 0); }
.trs-fau { opacity: 0; transform: translate3d(0px, var(--ty), 0); }
.trs-ful { opacity: 0; transform: translate3d(calc(-1 * var(--tx)), var(--ty), 0); }
.trs-fur { opacity: 0; transform: translate3d(var(--tx), var(--ty), 0); }

/* FLIP */
.trs-fld { backface-visibility: hidden; transform: perspective(2500px) rotateX(var(--dg)); }
.trs-fll { backface-visibility: hidden; transform: perspective(2500px) rotateY(calc(0deg - var(--dg))); }
.trs-flr { backface-visibility: hidden; transform: perspective(2500px) rotateY(var(--dg)); }
.trs-flu { backface-visibility: hidden; transform: perspective(2500px) rotateX(calc(0deg - var(--dg))); }

/* ZOOM */
.trs-zoi { opacity: 0; transform: scale(var(--zi)); }
.trs-zod { opacity: 0; transform: translate3d(0px, calc(-1 * var(--ty)), 0) scale(var(--zi)); }
.trs-ziu { opacity: 0; transform: translate3d(0px, var(--ty), 0) scale(var(--zi)); }
.trs-zoo { opacity: 0; transform: scale(var(--zo)) ; }

/* DELAYS */
.trsde-0 { --delay: 0ms; }
.trsde-25 { --delay: 25ms; }
.trsde-50 { --delay: 50ms; }
.trsde-75 { --delay: 75ms; }
.trsde-100 { --delay: 100ms; }
.trsde-150 { --delay: 150ms; }
.trsde-250 { --delay: 250ms; }
.trsde-500 { --delay: 500ms; }
.trsde-750 { --delay: 750ms; }
.trsde-1000  { --delay: 1000ms; }
.trsde-1500  { --delay: 1500ms; }
.trsde-2000 { --delay: 2000ms; }

/* DURATIONS */
.trsdu-100 { --duration: 100ms; }
.trsdu-200 { --duration: 200ms; }
.trsdu-300 { --duration: 300ms; }
.trsdu-400 { --duration: 400ms; }
.trsdu-500 { --duration: 500ms; }
.trsdu-750 { --duration: 750ms; }
.trsdu-1000 { --duration: 1000ms; }
.trsdu-1500 { --duration: 1500ms; }
.trsdu-2000 { --duration: 2000ms; }

/* TIMING FUNCTIONS */
.trstf-eas-1 { --easing: var(--ease-1); }
.trstf-eas-2 { --easing: var(--ease-2); }
.trstf-eas-3 { --easing: var(--ease-3); }
.trstf-eas-4 { --easing: var(--ease-4); }
.trstf-eas-5 { --easing: var(--ease-5); }
.trstf-eai-1 { --easing: var(--ease-in-1); }
.trstf-eai-2 { --easing: var(--ease-in-2); }
.trstf-eai-3 { --easing: var(--ease-in-3); }
.trstf-eai-4 { --easing: var(--ease-in-4); }
.trstf-eai-5 { --easing: var(--ease-in-5); }
.trstf-eao-1 { --easing: var(--ease-out-1); }
.trstf-eao-2 { --easing: var(--ease-out-2); }
.trstf-eao-3 { --easing: var(--ease-out-3); }
.trstf-eao-4 { --easing: var(--ease-out-4); }
.trstf-eao-5 { --easing: var(--ease-out-5); }
.trstf-eio-1 { --easing: var(--ease-in-out-1); }
.trstf-eio-2 { --easing: var(--ease-in-out-2); }
.trstf-eio-3 { --easing: var(--ease-in-out-3); }
.trstf-eio-4 { --easing: var(--ease-in-out-4); }
.trstf-eio-5 { --easing: var(--ease-in-out-5); }
.trstf-eel-1 { --easing: var(--ease-elastic-1); }
.trstf-eel-2 { --easing: var(--ease-elastic-2); }
.trstf-eel-3 { --easing: var(--ease-elastic-3); }
.trstf-eel-4 { --easing: var(--ease-elastic-4); }
.trstf-eel-5 { --easing: var(--ease-elastic-5); }
.trstf-esq-1 { --easing: var(--ease-squish-1); }
.trstf-esq-2 { --easing: var(--ease-squish-2); }
.trstf-esq-3 { --easing: var(--easing-squish-3); }
.trstf-esq-4 { --easing: var(--easing-squish-4); }
.trstf-esq-5 { --easing: var(--easing-squish-5); }
.trstf-lin { --easing: linear; }

/* FOR DEMO */
* {
  box-sizing: border-box;
}
aside, pre {
  background: hsl(210, 99%, 5%);
  color: hsl(190, 10%, 90%);
  overflow-x: auto;
  padding: 1ch;
}
body {
  block-size: 100vh;
  display: grid;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: small;
  grid-template-columns: 15rem 1fr;
  margin: unset;
}
button {
  background-color: hsl(210, 99%, 52%);
  border: 0;
  border-radius: 2em;
  color: hsl(210, 99%, 95%);
  inline-size: 100%;
  margin-block: .5em 1em;
  padding: 1em 2em;
}
fieldset {
  border: 0;
  padding: 1em 0;
}
img {
  block-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  inline-size: 100%;
}
input, select {
  border: 0;
  border-radius: .25em;
  font-size: inherit;
  inline-size: 100%;
  margin-block: .25em .75em;
  padding: .25em .5em;
}
legend {
  border-block-end: 1px solid #FFF;
  display: block;
  inline-size: 100%;
  padding-block: .5em;
}
main {
  margin: 2em;
  overflow: hidden;
}
pre {
  tab-size: 2;
}
#demo {
  display: grid;
  gap: 1em;
}
#demo1 {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  grid-column: 1 / span 2;
  position: relative;
}
#demo2, #demo3 {
  aspect-ratio: 16 / 9;
  position: relative;
  inline-size: 100%;
}

@media (min-width: 768px) {
  #demo {
    grid-template-columns: repeat(3, 1fr);
  }
  #demo1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
  #demo2, #demo3 {
    aspect-ratio: unset;
  }
}
const cleanIt = (code) => code.replace(/<img?.+\n\t/gi,'');
const playIt = () => { demo.classList.remove('trs'); setTimeout(() => { demo.classList.add('trs'); }, 400); code.innerText = cleanIt(demo.outerHTML); }
app.addEventListener('input', event => {
  const node = event.target;
  if (node.name) {
    demo.style.setProperty(node.name, node.value + (node.dataset.suffix||''));
    return;
  }
  const group = node.closest('fieldset');
  document.getElementById(group.name).className = [...group.elements].map(input => input.value).join(' ').replace(/  +/g, ' ');
  playIt();
})
play.addEventListener('click', () => playIt());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.