<div class="wrapper">
    <div class="text">
      This is a zoom demo.
    </div>
</div>

<div class="warning">⚠️ Your browser does not support CSS Scroll-Linked Animations, so this demo won't work. To see how it works and behaves use Chromium 89+ with “Experimental Web Platform Features” enabled. Enabling this flag in your main browser is not recommended, so please use a Beta/Canary/Nightly build.</div>

.wrapper {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;

	position: fixed;
	top: 0;
	left: 0;
}

.text {
	white-space: nowrap;
	overflow: hidden;
	font-family: monospace;
	font-size: 2em;
}

@supports (animation-timeline: works) {
	.warning {
		display: none;
	}

	@keyframes zoom {
		to {
			transform: scale(10);
		}
	}

	@scroll-timeline scrolling {
		source: auto;
		start: 0;
		end: 100%;
		time-range: 2s;
	}

	body {
		min-height: 500vh;
	}

	.text {
		animation: zoom 2s linear forwards;
		animation-timeline: scrolling;
	}
}

/* Show warning for older browser */
.warning {
	position: fixed;
	top: 1em;
	right: 1em;
	left: 1em;
	padding: 1em;
	border: 1px solid black;
	z-index: 9999;
	text-align: center;
	color: black;
	background: rgba(255 255 225 / 0.9);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

import { showDialog } from 'https://codepen.io/bramus/pen/ZEqMOLz/cccfe67c2b9cdfbeb5fb59083dbd0a64.js';
showDialog();