JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
<div id="shrinker"></div>
<a href="#" id="do-thing">Do thing</a>

CSS

html, body {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

#do-thing {
	color: #c0ffee;
	position: absolute;
	text-decoration: none;
	top: 10px; left: 10px;
}

#shrinker {
	background: #f10a75;
	// background-image: url('http://placehold.it/300x300');
	background-position: 50%;
	border: 0px solid #fff;
	-webkit-background-size: cover;
	        background-size: cover;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}

JavaScript

var dt = document.getElementById('do-thing'),
	shrinkAmt = '50px',
	globalFx = {
		paused: true,
		ease: Power4.easeInOut,
	},
	Shrink = TweenLite.to(shrinker, 0.85, {
		paused: true,
		ease: Power4.easeInOut,
		top: shrinkAmt,
		left: shrinkAmt,
		right: shrinkAmt,
		bottom: shrinkAmt,
	});

dt.addEventListener('click', function(){
	Shrink.play();
});