JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<div id="big-block">

</div>
<span class="when-visible-arrow">&#8592;</span>
<div id="big-block">

</div>

CSS

#big-block {
  height: 1800px;
}

.when-visible-arrow {
   color: #000; 
   font-size: 5rem;
   display: inline-block;
   transform: translateX(0px);
}

.when-visible-arrow.bounce {
  animation: bounce-animation 5s; 
}

@keyframes bounce-animation {
  0% {
    transform: translateX(30px);
  } 

  15% {
    transform: translateX(0px);
  } 
  
  30% {
    transform: translateX(30px);
  }
  
  45% {
    transform: translateX(0px);
  }
  
  60% {
    transform: translateX(30px);
  }
  
  75% {
    transform: translateX(0px);
  }
  
  90% {
    transform: translateX(30px);
  }  
  
  100% {
    transform: translateX(0px);
  }
}

JavaScript

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && !entry.target.classList.contains('bounce')) {
        entry.target.classList.add('bounce')        
      } 
    });
  },
  {
    threshold: 0.25
  }
);


observer.observe(document.querySelector('.when-visible-arrow'));