JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container red "></div>

<div id="container" class="myStage">
  <div id="animate"></div>
</div>

<div class="container blue"></div>

CSS

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

.down {
  animation: down 1s ease-in-out forwards;
}

.up {
  animation: up 1s ease-in-out forwards;
}

@keyframes down {
  0% {
    transform: translate(0%, 0%)
  }

  100% {
    transform: translate(350px, 350px)
  }
}

@keyframes up {
  0% {
    transform: translate(350px, 350px);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

.container {
  width: 100%;
  height: 1500px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

JavaScript

function myMove(type) {
  let element = document.getElementById('animate');
  element.removeAttribute('class');
  element.classList.add(type);
}

let count = false;
let position = document.documentElement.scrollTop;

window.addEventListener('scroll', e => {
  let scrolls = document.documentElement.scrollTop;
  let element = document.getElementById('animate');
  const mystage = document.querySelector('.myStage');

  if (!isViewport(mystage)) {
    if (scrolls > position) {
      console.log('down');
      myMove('down');
    } else {
      console.log('up');
      myMove('up');
    }
  } else {
    element.removeAttribute('class');
  }

  position = scrolls;

});


function isViewport(element) {
  let rect = element.getBoundingClientRect();
  return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
}