<div class="anima-container">
    <ul class="home_title">
      <li>
        <div class="left">
          <h2><span>look at your</span></h2>
        </div>
        <div class="right">
          <h2><span>look at your</span></h2>
        </div>
      </li>
      <li>
        <div class="left">
          <h2><span>product from</span></h2>
        </div>
        <div class="right">
          <h2><span>product from</span></h2>
        </div>
      </li>
      <li>
        <div class="left">
          <h2><span>a different</span></h2>
        </div>
        <div class="right">
          <h2><span>a different</span></h2>
        </div>
      </li>
      <li>
        <div class="left">
          <h2><span>angle</span></h2>
        </div>
        <div class="right">
          <h2><span>angle</span></h2>
        </div>
      </li>
    </ul>
  </div>
$color1: #FFD700;
$color2: #25282A;

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    
    * {
        user-select: none;
    }
}

.anima-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.home_title{
    margin: 120px 0 0;
    overflow: hidden;
    padding: 13vw 0 0;
    width: 100vw;

    li {
        display: flex;
        position: relative;
        height: 21.3vw;
        pointer-events: none;
        margin: -13vw -1.7vw 0;

        h2 {
            font-size: 10.7vw;
            margin: 0;
            padding: 0;
            line-height: 8.2vw;
            text-transform: uppercase;
            font-weight: 900;
            letter-spacing: -.45vw;
            width: 200%;
            overflow: hidden;
            position: relative;
            z-index: 1;
            text-align: center;

            span {
                display: inline-block;
            }
        }

        .left {
            width: 50%;
            overflow: hidden;
            color: $color1;

            h2 {
                transform: translateZ(0) rotate(-15deg) skewX(-15deg);
            }
        }

        .right {
            width: 50%;
            overflow: hidden;
            color: $color2;

            h2 {
                margin-left: -100%;
                transform: translateZ(0) rotate(15deg) skewX(15deg);
            }
        } 
    }
}
View Compiled
$('.anima-container').on('mousemove', function(e){
        //debugger;
        let screenX = e.originalEvent.screenX;
        const t = -(window.innerWidth / 2 - screenX);
        TweenMax.to(document.querySelectorAll('.anima-container .home_title span'), 1, {
            x : function(e, o){
                var i = 100 / (window.innerWidth / 2 / t),
                a = (window.innerWidth - o.clientWidth) / 2 * (i / 100);
                return a
            },
            force3D: !0
        });
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js