<!--  based on https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/ -->
<!-- <div class="space"></div> -->

<div class="elevator">
<div class="elevatorL">GET ON THE</div> <div class="elevatorR"> ELEVATOR</div>
</div>
<!-- Minos: Hello hello! We are glad to have you here! As you might know, you are expected to help us excavate an old NASA rocket and you may not leave until the job is over. 

Your phone vibrate 
[[check phone]] -->
body{
  height:400vh;
}
.space{
/*   hight:100vh; */
}
body {
	/* This affects the entire page */
	background-color: #111;
	color: #999;
	font-family:AvenirNextLTPro-Regular;
	max-width: 1088px;
margin:auto;
padding:10px;
min-height:350vh;

}
.space{
  
  height: 100vh
}
.elevator-transition{
 animation: repeat 1s forwards;
  animation-delay: 1s;
  	
}

.elevator{
margin:5em 0;
  color: #fff;
	font-family:AvenirNextLTPro-Bold;
	font-size: 3em;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap:10px;

}
.elevatorL{
  text-align: right;
  left:5em;
}
.elevatorR{
  left:10em;
}
@keyframes repeat{
  100%{
    filter: drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff);
  }
  
}
.elevatorL-transition{
    animation: moveLeft .7s forwards;
/*   animation-delay:2s; */
    	animation-play-state: paused ;
	animation-delay:  calc(var(--scroll) * -1s);

}
.elevatorR-transition{
    animation: moveRight .7s forwards;
/*     animation-delay:2s; */
    	animation-play-state: paused ;
	animation-delay:  calc(var(--scroll) * -1s);
}

@keyframes moveLeft {
      0% {
        transform: translateX(0px) rotate(0);
  }
  100%{
      transform: translateX(-10em);
  } 
}
@keyframes moveRight {
      0% {
        transform: translateX(0px) rotate(0);
  }
  100%{
      transform: translateX(10em);
  } 
}
window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);



const elevator = document.querySelector('.elevator');
const elevatorL = document.querySelector('.elevatorL');
const elevatorR = document.querySelector('.elevatorR');



// Create the observer, same as before:
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    
    if (entry.isIntersecting) {
      
      elevator.classList.add('elevator-transition');
            elevatorL.classList.add('elevatorL-transition');
      elevatorR.classList.add('elevatorR-transition');

      return;
    }

    elevator.classList.remove('elevator-transition');
    elevatorL.classList.remove('elevatorL-transition');
    elevatorR.classList.remove('elevatorR-transition');

  });
});

// var observer = new IntersectionObserver(callback, options);
// observer.observe(elevator);

observer.observe(document.querySelector('.elevator'));
observer.observe(document.querySelector('.elevatorL'));
observer.observe(document.querySelector('.elevatorR'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.