CodePen Embed - Mouse Driven Vertical Carousel

<div class="container">
  <header class="c-header c-header--archive c-header--project-list">
    <div class="c-mouse-vertical-carousel js-carousel u-media-wrapper u-media-wrapper--16-9">
      <ul class="c-mouse-vertical-carousel__list js-carousel-list">
        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="0">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        01
                    </span> Nevada
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Carson City
            </p>
          </a>
        </li>

        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="1">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        02
                    </span> New Hampshire
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Concord
            </p>
          </a>
        </li>

        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="2">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        03
                    </span> New York
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Albany
            </p>
          </a>
        </li>

        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="3">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        04
                    </span> Oklahoma
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Oklahoma City
            </p>
          </a>
        </li>

        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="4">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        05
                    </span> North Carolina
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Raleigh
            </p>
          </a>
        </li>
        
        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="5">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        06
                    </span> Utah
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Salt Lake City
            </p>
          </a>
        </li>
        
        <li class="c-mouse-vertical-carousel__list-item js-carousel-list-item" data-item-id="6">
          <a href="">
            <p class="c-mouse-vertical-carousel__eyebrow u-b4">
              <span>
                        07
                    </span> Missouri
            </p>

            <p class="c-mouse-vertical-carousel__title u-a5">
              Jefferson City
            </p>
          </a>
        </li>
      </ul>

      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://d39d4r6jmh1lz3.cloudfront.net/lass-id-original-1515801602-5a594c029dcd1.jpg')"></i>
      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.visittheusa.com/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2017-01/Getty_104106362_Brand_State_NewHampshire_Web72DPI.jpg?itok=-D2AFnPq')"></i>
      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=1200')"></i>
      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.gousa.in/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2017-03/f13bafc9dbcd2df659faac33a29cf4ae.jpeg?itok=rj0Zoh1b')"></i>
      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://psmag.com/.image/t_share/MTU4NzUzMjc3MDkyMDQ2NTUy/gettyimages-1031626122.jpg')"></i>
      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.history.com/.image/t_share/MTU3ODc5MDg1ODk1NDYwMTY5/natural-bridge-bryce-canyon-utah-usa.jpg')"></i>
      <i class="c-mouse-vertical-carousel__bg-img js-carousel-bg-img" style="background-image: url('https://www.addictioncenter.com/app/uploads/2018/06/xMissouri.jpeg.pagespeed.ic.9qVaCJN2BK.jpg')"></i>
      <i class="c-gradient-overlay"></i>
    </div>
  </header>
</div>

* {
  margin: 0;
  padding: 0;
}

body {
  color: #fff;
  background-color: #021417;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  min-height: 100vh;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.c-header {
  display: block;
  width: 100%;
}

.u-a5 {
  font-family: Arial;
  font-size: 37px;
  line-height: 35px;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  color: #fff;
}

.u-b4 {
  font-family: Arial;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0.3px;
  font-weight: normal;
  color: #fff;
}

a {
  text-decoration: none;
}

//MEDIA WRAPPER
.u-media-wrapper {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  height: 0;

  &#{&}--16-9 {
    padding-bottom: percentage(9/16);
  }
}

// GRADIENT IMAGE OVERLAY
.c-gradient-overlay {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at 49% 50%,
    rgba(2, 21, 25, 0.3),
    rgba(2, 21, 25, 0.6)
  );
}

.c-mouse-vertical-carousel {
  position: relative;
  overflow: hidden;

  &__list {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
  }

  &__list-item {
    a {
      display: block;
      padding-bottom: 25px;
      padding-top: 25px;
      padding-left: percentage(13/24);
    }
  }

  &__eyebrow {
    position: relative;
    padding-bottom: 12px;

    span {
      position: absolute;
      left: -30px;
      top: 2px;
    }
  }

  &__title {
    max-width: 450px;
  }

  &__bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform;
  }
}

View Compiled

class VerticalMouseDrivenCarousel {
  constructor(options = {}) {
    const _defaults = {
      carousel: ".js-carousel",
      bgImg: ".js-carousel-bg-img",
      list: ".js-carousel-list",
      listItem: ".js-carousel-list-item"
    };

    this.posY = 0;

    this.defaults = Object.assign({}, _defaults, options);

    this.initCursor();
    this.init();
    this.bgImgController();
  }

  //region getters
  getBgImgs() {
    return document.querySelectorAll(this.defaults.bgImg);
  }

  getListItems() {
    return document.querySelectorAll(this.defaults.listItem);
  }

  getList() {
    return document.querySelector(this.defaults.list);
  }

  getCarousel() {
    return document.querySelector(this.defaults.carousel);
  }

  init() {
    TweenMax.set(this.getBgImgs(), {
      autoAlpha: 0,
      scale: 1.05
    });

    TweenMax.set(this.getBgImgs()[0], {
      autoAlpha: 1,
      scale: 1
    });

    this.listItems = this.getListItems().length - 1;
    
    this.listOpacityController(0);
  }

  initCursor() {
    const listHeight = this.getList().clientHeight;
    const carouselHeight = this.getCarousel().clientHeight;

    this.getCarousel().addEventListener(
      "mousemove",
      event => {
        this.posY = event.pageY - this.getCarousel().offsetTop;
        let offset = -this.posY / carouselHeight * listHeight;

        TweenMax.to(this.getList(), 0.3, {
          y: offset,
          ease: Power4.easeOut
        });
      },
      false
    );
  }

  bgImgController() {
    for (const link of this.getListItems()) {
      link.addEventListener("mouseenter", ev => {
        let currentId = ev.currentTarget.dataset.itemId;

        this.listOpacityController(currentId);

        TweenMax.to(ev.currentTarget, 0.3, {
          autoAlpha: 1
        });

        TweenMax.to(".is-visible", 0.2, {
          autoAlpha: 0,
          scale: 1.05
        });

        if (!this.getBgImgs()[currentId].classList.contains("is-visible")) {
          this.getBgImgs()[currentId].classList.add("is-visible");
        }

        TweenMax.to(this.getBgImgs()[currentId], 0.6, {
          autoAlpha: 1,
          scale: 1
        });
      });
    }
  }

  listOpacityController(id) {
    id = parseInt(id);
    let aboveCurrent = this.listItems - id;
    let belowCurrent = parseInt(id);

    if (aboveCurrent > 0) {
      for (let i = 1; i <= aboveCurrent; i++) {
        let opacity = 0.5 / i;
        let offset = 5 * i;
        TweenMax.to(this.getListItems()[id + i], 0.5, {
          autoAlpha: opacity,
          x: offset,
          ease: Power3.easeOut
        });
      }
    }

    if (belowCurrent > 0) {
      for (let i = 0; i <= belowCurrent; i++) {
        let opacity = 0.5 / i;
        let offset = 5 * i;
        TweenMax.to(this.getListItems()[id - i], 0.5, {
          autoAlpha: opacity,
          x: offset,
          ease: Power3.easeOut
        });
      }
    }
  }
}

new VerticalMouseDrivenCarousel();

This Pen is owned by Tomislav Jezidžić on CodePen.

See more by @tjezidzic on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js