<div id="banner">
    <img id="green" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred.svg">
    <img id="blue" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-blue.svg">
    <img id="red" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/fred-red.svg">
</div>

body {
  font-family: 'Kanit', sans-serif;
  background:#252525;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#banner {
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  position:relative;
  width:800px;
  height:410px;
  border:1px solid #333;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/space-background.png);
}



img {
  width:100px;
}

gsap.set("#banner", {opacity:1}) // avoid Flash of Unstyled Content (fouc)

const tl = gsap.timeline({id:"tl", paused:true})
tl.from("#green", {opacity:0, y:-50})
  .from("#blue", {opacity:0, y:50})
  .from("#red", {opacity:0, scale:2})
  


GSDevTools.create({animation:tl})