JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="box"></div>

CSS

div#box {
    width: 400px;
    height: 400px;
    background: url(http://picsum.photos/id/23/1200/900) no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

JavaScript

function easeInOutExpo(t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}

var a = 0;

var elem = document.querySelector('#box');

var current;
var delay = 0;

function fn(){

delay++;

current = easeInOutExpo(a , 0 , 100 , 120);

a++;

if(a === 120){
	a = 0;
}

elem.style.clipPath = 'polygon(' + current + '% 0, 100% 0, 100% 100%, ' + current + '% 100%)';
elem.style.transform = 'translateX(' + (current * 3) + 'px) scale(' + (1 + current) / 30 + ')'

requestAnimationFrame(fn)
}
fn();