Can’t add css animation to a several divs on touchstart event

I have some simple css animation to occur when a touch start event is detected however keep getting “undefined is not an object” when trying to add a class to a div element. Please check this on mobile as it’s activated through a touch event. I want to add a class with new value to all the li items inside a div. I tried console logging each list item before adding the class and prints in the console fine. it’s pretty straightforward but i cant figure out why i’m getting this error only when adding the class. The CSS for animations needs to only occur on mobile so i added those new class in the media queries.

HERE IS A THE WORKING WEBSITE LINK – https://kerlerone-animated.netlify.app

HTML

 <ul>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
         <li class="top"><img src="https://www.fillmurray.com/640/360"></li>
      </ul>

CSS

   ul {
      height: 50vh;
      flex-direction: column;
      transform: translateY(0);
      
      
   } 

  .top {
     height: 5px;
     width: 95vw;
     transition: all 2s ease-out;
   }

  .top img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border: 2px solid black;
      pointer-events: none;
   }

   .longer {
      height: 205px;
   }

JS

   container.addEventListener('touchstart', handlePanStart, false);


         function handlePanStart() {
            const target = document.querySelectorAll('.top')
            let yOffset = window.pageYOffset;
            console.log('start', 'ypos: ' + yOffset)

            target.forEach((item) => {
               console.log(item.classList)
               item.classlist.add('longer')
              
            })
         }