Vertical slider

<div class="menu">
  <ul class="menu--wrapper">
    <li class="menu--item"><button href="#">Facebook</button></li>
    <li class="menu--item"><button href="#">Netflix</button></li>
    <li class="menu--item"><button href="#">Instagram</button></li>
    <li class="menu--item"><button href="#">Google</button></li>
    <li class="menu--item"><button href="#">Twitter</button></li>
    <li class="menu--item"><button href="#">Amazon</button></li>
    <li class="menu--item"><button href="#">Pinterest</button></li>
    <li class="menu--item"><button href="#">Spotify</button></li>
    <li class="menu--item"><button href="#">YouTube</button></li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
//Скрипт js надо подключать здесь
//Автор: Stephen Scaff. @StephenScaff

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  background: #c9b3a6;
  color: #020000;
}

.menu {
  height: 100vh;
  overflow: hidden;
  background: #abb35b;
  cursor: -webkit-grab;
  cursor: grab;
}
.menu.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.menu ul {
  counter-reset: count;
}
.menu--item {
  counter-increment: count;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 120px;
  line-height: 1.2;
  padding: 2rem 0;
  text-align: center;
}
@media (max-width: 767px) {
  .menu--item {
    font-size: 10vw;
    padding: 1rem 0;
  }
}
.menu--item:nth-child(n+10):before {
  content: counter(count);
}
.menu--item button {
  color: #020000;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 120px;
  -webkit-appearance: none;
  background: none;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  color: #020000;
  font-family: "Orelo-sw-db", serif;
  cursor: pointer;
}
@media (max-width: 767px) {
  .menu--item button {
    font-size: 10vw;
  }
}
.menu--item button:before {
  position: absolute;
  z-index: -1;
  left: 0;
  display: inline-block;
  transform: translateX(-100%) scale(0.4);
  content: "0" counter(count);
  color: #862929;
  font-family: cursive;
}



@font-face {
  font-family: "Orelo-sw-db";
  font-weight: inherit;
  font-style: inherit;
}

/*--------------------
Vars
--------------------*/
const $menu = document.querySelector('.menu');
const $items = document.querySelectorAll('.menu--item');
let menuHeight = $menu.clientHeight;
let itemHeight = $items[0].clientHeight;
let wrapHeight = $items.length * itemHeight;

let scrollSpeed = 0;
let oldScrollY = 0;
let scrollY = 0;
let y = 0;


/*--------------------
Lerp
--------------------*/
const lerp = (v0, v1, t) => {
  return v0 * (1 - t) + v1 * t;
};


/*--------------------
Dispose
--------------------*/
const dispose = scroll => {
  gsap.set($items, {
    y: i => {
      return i * itemHeight + scroll;
    },
    modifiers: {
      y: y => {
        const s = gsap.utils.wrap(-itemHeight, wrapHeight - itemHeight, parseInt(y));
        return `${s}px`;
      } } });


};
dispose(0);


/*--------------------
Wheel
--------------------*/
const handleMouseWheel = e => {
  scrollY -= e.deltaY;
};


/*--------------------
Touch
--------------------*/
let touchStart = 0;
let touchY = 0;
let isDragging = false;
const handleTouchStart = e => {
  touchStart = e.clientY || e.touches[0].clientY;
  isDragging = true;
  $menu.classList.add('is-dragging');
};
const handleTouchMove = e => {
  if (!isDragging) return;
  touchY = e.clientY || e.touches[0].clientY;
  scrollY += (touchY - touchStart) * 2.5;
  touchStart = touchY;
};
const handleTouchEnd = () => {
  isDragging = false;
  $menu.classList.remove('is-dragging');
};


/*--------------------
Listeners
--------------------*/
$menu.addEventListener('mousewheel', handleMouseWheel);

$menu.addEventListener('touchstart', handleTouchStart);
$menu.addEventListener('touchmove', handleTouchMove);
$menu.addEventListener('touchend', handleTouchEnd);

$menu.addEventListener('mousedown', handleTouchStart);
$menu.addEventListener('mousemove', handleTouchMove);
$menu.addEventListener('mouseleave', handleTouchEnd);
$menu.addEventListener('mouseup', handleTouchEnd);

$menu.addEventListener('selectstart', () => {return false;});


/*--------------------
Resize
--------------------*/
window.addEventListener('resize', () => {
  menuHeight = $menu.clientHeight;
  itemHeight = $items[0].clientHeight;
  wrapHeight = $items.length * itemHeight;
});


/*--------------------
Render
--------------------*/
const render = () => {
  requestAnimationFrame(render);
  y = lerp(y, scrollY, .1);
  dispose(y);

  scrollSpeed = y - oldScrollY;
  oldScrollY = y;

  gsap.to($items, {
    scale: 1 - Math.min(100, Math.abs(scrollSpeed)) * .005,
    rotate: scrollSpeed * 0.2 });

};
render();