Ralph Randall Smith

javascript

let options = {
       root: document.querySelector("#scrollArea"),
       rootMargin: "0px",
       threshold: .5,
 };

const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
           if (entry.isIntersecting) {
               entry.target.classList.add('show');
           } else {
               entry.target.classList.remove('show');
           }
       }, options);
   });

const hiddenElements = document.querySelectorAll('.hidden, .from-left, .from-right, .grow, .shrink');
hiddenElements.forEach((el) => observer.observe(el));

css

 .hidden {
       opacity: 0;
       transition: all 1s;
 }

 .from-left {
       opacity: 0;
       transform: translateX(-100%);
       transition: all 1s;
 }      

 .from-right {
       opacity: 0;
       transform: translateX(+100%);
       transition: all 1s;
 }

 .grow {
       opacity: 0;
       transform: scale(.3, .3);
       transition: all 1s;
 }

 .shrink {
       opacity: 0;
       transform: scale(3, 3);
       transition: all 2s;
 }

 .show {
       opacity: 1;
       transform: translateX(0);
 }

 .skill {
       height: 150px;
       width: 150px;
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
   }

 .skill:nth-child(2){
       transition-delay: 200ms;
 }

 .skill:nth-child(3){
       transition-delay: 400ms;
 }

 .skill:nth-child(4){
       transition-delay: 600ms;
 }