JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="demo">
    <div id="anim"></div>
</div>

CSS

div#anim {
	width: 700px;
	height: 700px;
	/*border: 3px solid purple;*/
	background: red;
	margin: 50px;
	transform-origin: top right;
	background: url(https://picsum.photos/1200/903) no-repeat;
	background-size: cover;
  transform: translateX(0) scale(0.4);
	background-position: center;
	/*backface-visibility: hidden;*/
	animation: a cubic-bezier(0.67, 0.02, 1, 1) 1.5s both 1s;
}
@keyframes a {
	from {
		/*backface-visibility: hidden;*/
		transform: translateX(0) scale(0.4);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 37%, 0 38%);
		clip-path: polygon(0 0, 100% 0, 100% 37%, 0 38%);
	}
	30% {
		/*backface-visibility: hidden;*/
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 37%, 0 38%);
		clip-path: polygon(0 0, 100% 0, 100% 37%, 0 38%);
		transform: translateX(300px) scale(0.6);
		transform-origin: top right;
		animation-timing-function: cubic-bezier(0, 0, 0.33, 1);
	}
	100% {
		/*backface-visibility: hidden;*/
		transform: translateX(500px) scale(1);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

JavaScript

var a = function(){
	console.log('a')
}

var b = function(x){
	console.log(x.name)
}
b(a)