JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="featured-work-slider flexslider">
    <ul class="slides">
		<li>		   
<div class="background-sky">	
		<h1 class="hero-title1">1 слайд</h1>
    <ul class="animate-block absolut">
        <li>
            Анимированный блок
        </li>
     </ul>
</div>	
	 </li> 
	 <li>		    
<div class="background-night">	
		<h1 class="hero-title2">2 слайд</h1>
    <ul class="animate-block2 absolut">
        <li>
            Анимированный блок 2
        </li>
     </ul>
</div>	
	 </li> 
	 </ul>
	
</div>

CSS

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
body, html, main {
background:#fff;
height: 100%;
font-size: 12px;
font-weight: 300;
line-height: 26px;
}
.background-sky, .background-night {
	background-color: #07a8dd;	
    display: block;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
	height: 520px;
}
.background-night {
    background-color: #59CB59;
}
.absolut {
    position: absolute;
	margin-left:auto;
	margin-right:auto;
	right:0;
}
.animate-block, .animate-block2 {
    left:0;
}

JavaScript

$('.flexslider').flexslider({
   animation: "fade",
   directionNav: false,
    controlNav: false, 
     start: function(){
	   TweenMax.to('.flex-active-slide .animate-block', 3, {top:300, delay:3});
   },
    after: function(){ 
      TweenMax.to('.flex-active-slide .animate-block2', 3, {top:150, left:80, delay:3});
    },
   slideshowSpeed: 7000,       
    animationSpeed: 600
});