<div class="demo">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
</div> 













<div class="footer">
  <a href="https://www.creativeCodingClub.com/bundles/creative-coding-club" target="_blank">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32887/herman.svg" alt="" width="60"></a>
  
</div>

//learn how this was made
//https://www.creativeCodingClub.com

body, html {
  font-family:sans-serif;
  background:#ffcc33;
  height:100%;
  position:relative;
  overflow:hidden;
  margin:0;
}

.demo {
  perspective:400px;
  visibility:hidden;
  height:100%;
}

.demo div {
  position:absolute;
  display:inline-block;
  left:50%;
  top:50%;
  font-weight:800;
  font-size:60px;
  color:#1C70A7;
  transform:translate(-50%, -50%);
  white-space:nowrap;
}

@media only screen and (max-width: 900px) {
  .demo div {
    font-size:36px;
  }
}

.footer {
  position:fixed;
  bottom:0;
  padding:20px;
}

let animation = gsap.timeline({repeat:20})
let targets = document.querySelectorAll(".demo div")
let numberOfTargets = targets.length

let duration = 0.4 //change this
let pause = 0.75 // change this

let stagger = duration + pause
let repeatDelay = (stagger * (numberOfTargets - 1)) + pause

function init() {
  gsap.set(".demo", {autoAlpha:1})
  animation.from(targets, {y:80, duration:duration, opacity:0, stagger:{
    each:stagger,
    repeat:-1,
    repeatDelay:repeatDelay
  }})
     .to(targets, {y:-80, duration:duration, opacity:0, stagger:{
    each:stagger,
    repeat:-1,
    repeatDelay:repeatDelay
  }}, stagger)
}
//click anywhere to pause
window.addEventListener("click", () => animation.paused(!animation.paused()))
init()


/* learn the GreenSock Animation Platform (GSAP 3) https://courses.snorkl.tv/courses/gsap-3-express */