JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<span id="container">
  <img src="https://images.unsplash.com/photo-1448975750337-b0290d621d6d?crop=entropy&dpr=2&fit=crop&fm=jpg&h=775&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450" />
</span>

CSS

body, html {
  margin:0;
  width:100%;
  height:100%;
}
span {
  display:inline-block;
}

JavaScript

var duration = 2;
var ease = Power2.easeInOut;

TweenMax.fromTo('#container', duration, {
  height: 200,
  width: 200,
	overflow: 'hidden',
	x: 200
}, {
  x: 0,
  ease: ease
});

TweenMax.fromTo('#container > img', duration, {
	y: -150,
	x: -200
}, {
	y: -150,
	x: 0,
  ease: ease
});