Getting some sticky animation when I am using locomotive scroll and scroll trigger

This is my first time trying scroll trigger in gsap I am trying to understand how locomotive scroll and scroll trigger work together but when the animation is going on I am facing some kind of sticky-ness in the animation I mean the animation is not smooth there is some kind of delay in between but I don't know what is the reason for this. I tried to recreate this situation in my code pen which I have linked below. It will be helpful if someone can help me to solve this Here is my code-pen code where I recreated the error. code-pen

here is the code

gsap.registerPlugin(ScrollTrigger);

const pageContainer = document.querySelector(".scrollContainer");

const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true,
});
scroller.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(pageContainer, {
  scrollTop(value) {
    return arguments.length
      ? scroller.scrollTo(value, 0, 0)
      : scroller.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight,
    };
  },

  pinType: document.querySelector(".scrollContainer").style.transform
    ? "transform"
    : "fixed",
});

//   ! edit here
gsap.to(".left", {
  scrollTrigger: {
    trigger: ".left",
    start: "center top",
    scroller: pageContainer,
    scrub: true,
  },
  duration: 1,
  x:50
});

ScrollTrigger.addEventListener("refresh", () => scroller.update());

ScrollTrigger.refresh();

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --white:#fff;
}
body{
    font-family: 'neue-med';
    background-color: #D4C9C9;
}
.container{
    padding: 35px;
    height: 200vh
}

h4{
    letter-spacing: 1px;
    display: inline-block;
    font-size: 25px;
    transition: .2s ease-in;
}
h4:hover{
    color: whitesmoke;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css"
    />
    <!-- <link rel="stylesheet" href="/base.css"> -->
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container scrollContainer">
      <div class="sec" data-scroll-section>
        <div class="nav">
          <div class="nav-text">
            <h4 class="left">LOCOMOTIVE.CA</h4>
            <h4 class="right" style="float: right">V4.X-EDITION</h4>
          </div>
          </div>
        </div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
    
  </body>
</html>

Solution

So basically I have got an unspecified transition set on my h4 - so basically a transition all - in CSS, which is interfering with GSAP's tween.

so I need to either get rid off it or specify what is supposed to be transitioned, so it does not add CSS transitions to properties you are going to tween on with GSAP on those elements.