Animations API

by Sasabee

HTML

<body></body>

CSS

:root {
	font-size: 24px;
}

* {
	box-sizing: border-box;
}

body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	max-height: 466px;
	background-image: linear-gradient(135deg, #333 20%, #444 20% 40%, #333 40% 60%, #444 60% 80%, #333 80%);
}

.mask {
	width: 100%;
	height: 100%;
	max-height: inherit;
	padding: 2rem;
	background-color: rgba(255,255,255,.1);
	backdrop-filter: blur(10px);
}

.base {
	width: 100%;
	height: 100%;
	background-color: white;
}

.content {
	width: 100%;
	height: 100%;
	background-color: yellow;
}

JavaScript

const createAnimation = (element, keyframes, option)=>{
	const keyframeeffect = new KeyframeEffect(element, keyframes, option);
	return new Animation(keyframeeffect);
};

const openKeyframes = [
	{ transform: 'scaleY(0)' },
	{ transform: 'scaleY(1)' }
];
const insertKeyframes = [
	{ marginLeft: '-2rem', opacity: 0 },
	{ marginLeft: 0, opacity: 1 }
];
const closeKeyframes = [
	{ transform: 'scaleX(0)' }
];

const option = { duration: 1000, easing: 'ease-out' };

const openModal = ()=>{
	const mask = document.createElement('div');
	mask.classList.add('mask');
	const base = document.createElement('div');
	base.classList.add('base');
	const content = document.createElement('div');
	content.classList.add('content');

	const openAnimation = createAnimation(base, openKeyframes, option);
	openAnimation.finished.then(self=>{
		self.effect.target.append(content);
		insertAnimation.play();
	});

	const insertAnimation = createAnimation(content, insertKeyframes, option);
	insertAnimation.finished.then(()=>{
		const closeAnimation = createAnimation(base, closeKeyframes, option);
		closeAnimation.finished.then(self=>{
			self.effect.target.parentNode.remove();
			setTimeout(openModal, 1000);
		});
		closeAnimation.play();
	});

	document.body.append(mask);
	mask.append(base);
	openAnimation.play();
};

openModal();