Html list domino transition effect

Nice domino effect transition on html list items, triggered when they are inside the viewport, with Vanilla JavaScript

by Alex Tade

HTML

<h1>
 Scroll down to see the effect
</h1>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<ul>
    <li>Automatic cutting and machining
        of the corners FORENCLEAT</li> 
    <li>Automatic feeder of the boards</li> 
    <li>Automatic stacking system
        of the finished crates</li>      
     <li>Quality control equipment</li> 
    <li>Production up to 3000 boards/h</li> 
</ul>

<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<ul>
    <li>Automatic cutting and machining
        of the corners FORENCLEAT</li> 
    <li>Automatic feeder of the boards</li> 
    <li>Automatic stacking system
        of the finished crates</li>      
     <li>Quality control equipment</li> 
    <li>Production up to 3000 boards/h</li> 
    <li>Automatic stacking system
        of the finished crates</li>      
     <li>Quality control equipment</li> 
...

CSS

ul > li{
  transition: all 1s ease-out;
  opacity: 0;
  transform: translateX(-30px);
}
ul > li.actli{
  opacity: 1;
  transform: translateX(0);
}

JavaScript

window.addEventListener('load', (event) => {

  let winH = window.innerHeight;

  /* domino effe */
  let domino, doParent;
  if(document.querySelector('ul > li')){
    let traDelay0 = 200; // set the start delay value (ms) you prefer
    let traDelay = traDelay0;
    let traDelay2 = 200; // set the domino delay value (ms) you prefer
    let traDelayMS = 0;
    domino = document.querySelectorAll('ul > li');

    domino.forEach(function(v,i,a){
      doParent = v.parentNode;
      if(v == doParent.firstElementChild){ 
        traDelay = traDelay0; // back to traDelay0
      } else {
        traDelay += traDelay2;
      }  
      traDelayMS = traDelay + 'ms';
      v.style.transitionDelay =  traDelayMS;
    });
  } // end domino effe

  window.onscroll = function(event) {

    if(domino){
      domino.forEach((v) => {
        let rect = v.getBoundingClientRect();
        if((rect.top<=winH)&&(rect.bottom>0)){
          v.classList.add('actli');
        } else {
          v.classList.remove('actli');
        }
      });
    } // end domino effects

    
  }; //  end window.onscroll
  
  if(domino){
    window.scrollTo(0, 2);
  }

}); // end readystate: complete