JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div id="wrapper">
  <img src="http://www.lorempixel.com/150/50" alt="logo" id="logo">
  <p class="copy">Lorem ipsum dolor sit amet, nonumy menandri ius et, eam no soleat explicari accommodare.</p>
  <img src="http://www.lorempixel.com/100/250" alt="image" id="img">
  <p class="outro">Lorem ipsum dolor sit amet, nonumy menandri ius et, eam no soleat explicari accommodare.</p>
  <div class="button">
    Call to action
  </div>
</div>

CSS

body {
  font-family: 'Lato', sans-serif;
  position: relative;
}

#wrapper {
  position: absolute;
  width: 300px;
  height: 250px;
  background-color: #ff6600;
  background: -moz-radial-gradient(center, ellipse cover, #e14c00 0%, #ff6600 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #e14c00 0%,#ff6600 100%);
  background: radial-gradient(ellipse at center, #e14c00 0%,#ff6600 100%);
}

JavaScript

var logo = $('#logo');
var copy = $('.copy');
var image = $('#img');
var outro = $('.outro');
var button = $('.button');
var animDuration = 1;
var animEaseOut = Expo.easeOut;
var animEaseIn = Power2.easeIn;
var lastFramePosition = 6;
var timeline = new TimelineMax({
	paused: true,
  repeat: 2,
  repeatDelay: 3
});

timeline.fromTo(logo, animDuration, {
	position: 'absolute',
  top: '50%',
  left: '50%',
  yPercent: -50,
  xPercent: -50,
	width: 260,
	scale: 0
}, {
	scale: 1,
  ease: animEaseOut
}).to(logo, animDuration, { delay: 1, autoAlpha: 0, scale: 0.9, ease: animEaseIn });

timeline.fromTo(copy, animDuration, {
	position: 'absolute',
  top: 80,
  left: -290,
  width: 280,
	fontFamily: 'Lato, sans-serif',
  color: '#fff',
  fontSize: 20,
  autoAlpha: 0
}, {
	autoAlpha: 1,
	x: 300,
  ease: animEaseOut
}).to(copy, animDuration, { delay: 1, autoAlpha: 0, x: 350, ease: animEaseIn });

timeline.fromTo(image, animDuration, {
	position: 'absolute',
  top: -300,
  left: 0,
  autoAlpha: 0
}, {
	autoAlpha: 1,
	y: 300,
  ease: animEaseOut
}, lastFramePosition);

timeline.fromTo(outro, animDuration, {
	position: 'absolute',
  top: 20,
  left: 300,
	color: '#fff',
  autoAlpha: 0,
  width: 180
}, {
	autoAlpha: 1,
	x: -190,
  ease: animEaseOut
}, lastFramePosition);

timeline.fromTo(button, animDuration, {
	display: 'inline',
	position: 'absolute',
  bottom: -50,
  left: 110,
	fontFamily: 'Lato, sans-serif',
  paddingTop: 10,
  paddingRight: 20,
  paddingBottom: 10,
  paddingLeft: 20,
  backgroundColor: '#fff',
  color: '#ff6600',
  borderBottomWidth: 2,
  borderBottomStyle: 'solid',
  borderBottomColor: '#e14c00',
  autoAlpha: 0
}, {
	autoAlpha: 1,
	y: -70,
  ease: animEaseOut
}, lastFramePosition);

timeline.play();