<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<h3><span id="h3-1">Alright, not cool.</span> <span id="h3-2">when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></h3> </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script>
tl = new TimelineMax( {yoyo: true, repeat: -1 } );
tl.from('h1', 2, {autoAlpha: 0, y:250, ease: Power2.easeOut}, 0 )
.from('h2', 2, {autoAlpha: 0, y:200, ease: Power2.easeOut}, .25 )
.from('#h3-1', 2, {autoAlpha: 0, y:200, ease: Power2.easeOut}, .35 )
.from('#h3-2', 2, {autoAlpha: 0, y:230, ease: Power2.easeOut}, .35 )
;
</script>
