<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="upperWrap"> <div id="upper">title text </div> </div> <div id="line"></div> <div id="lowerWrap"> <div id="lower">This is just the lower info</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <script> var tl = new TimelineMax({ repeat: -1 }); tl.from("#line", 0.5, { scaleX: 0, transformOrigin: "right center" }); tl.from("#upper", 0.75, { y: 30 }, "text"); tl.from("#lower", 0.75, { y: -30 }, "text"); tl.to("#line, #upper, #lower", 1, { opacity: 0 }, "+=3"); </script>

* { box-sizing: border-box; } body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; color: white; overflow: hidden; background-color: #1B1B1B; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } #upperWrap, #lowerWrap { overflow: hidden; height: 30px; line-height: 30px; width: 300px; font-weight: 700; } #upper { font-size: 24px; text-transform: uppercase } #line { width: 300px; height: 1px; background: white; }