gsapとlocomotiveを組み合わせた慣性スクロールを実装したい

前提

お世話になります。
標記の件に関して、質問したいことがあり、こちらにてお聞きいたします。
ご教授いただければ幸いです。

実現したいこと

gsapでアニメーションを実装しているwebsiteにlocomotive.jsにて慣性スクロールを取り入れたいです。

発生している問題・エラーメッセージ

gsapでアニメーションを付与している要素が、ちらついて正常に動いてくれません。
JavaScriptでは、locomotive.jsを考慮した記述をしています。

問題の状況をcode penにて準備しました。
こちらをご覧になっていただければ、ご理解いただけやすいと思います。
code pen
※code penでは桃色の正方形が画面内に入った際、右にスライドするアニメーションを付与しています。

該当のソースコード

html
1<head>
2<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
3</head>
4
5<div class="wrapper" data-scroll-container>
6  <section class="container" data-scroll-section data-scroll-section-id="section0"></section>
7  <section class="container" data-scroll-section data-scroll-section-id="section1">
8    <h1 data-scroll data-scroll-speed="1">Hey</h1>
9    <p data-scroll data-scroll-speed="2">👋</p>
10  </section>
11  <section class="container test" data-scroll-section data-scroll-section-id="section2">
12    <h1 data-scroll data-scroll-speed="1">What's up?</h1>
13    <p data-scroll data-scroll-speed="2">😬</p>
14  </section>
15</div>
16
17<script src='https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4'></script>
18<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js'></script>
19<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js'></script>

css
1
2.wrapper {
3  width: 1000px;
4  margin: 0 auto;
5}
6
7.container {
8  width: 100%;
9  height: 800px;
10  background-color: blue;
11}
12
13.container:nth-child(2) {
14  background-color: palegoldenrod;
15}
16
17.container:last-child {
18  background-color: violet;
19}
20
21h1 {
22  color: darkblue;
23  font-weight: 700;
24  font-size: 400%;
25}
26
27p {
28  color: tomato;
29  font-size: 300%;
30}
31

js
1const locoScroll = new LocomotiveScroll({
2  el: document.querySelector('[data-scroll-container]'),
3  smooth: true,
4  smoothMobile: true,
5  lerp: .07,
6});
7
8locoScroll.on("scroll", ScrollTrigger.update);
9ScrollTrigger.scrollerProxy(".wrapper", {
10  scrollTop(value) {
11    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
12  },
13  getBoundingClientRect() {
14    return {
15      top: 0,
16      left: 0,
17      width: window.innerWidth,
18      height: window.innerHeight
19    };
20  },
21  pinType: document.querySelector(".wrapper").style.transform ? "transform" : "fixed"
22});
23
24
25ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
26ScrollTrigger.refresh();
27
28
29window.addEventListener('DOMContentLoaded', () => {
30  gsap.fromTo('.test', { //アニメーションしたい要素を指定
31    x: 0,
32  },
33    {
34      x: 90,
35      duration: 1,
36
37      scrollTrigger: {
38        trigger: '.test',//アニメーションが始まるトリガーとなる要素
39        start: 'top 50%', //アニメーションが始まる位置を指定
40        scroller: ".wrapper",
41        markers: true,
42      }
43    });
44});