スクロールマジックと慣性スクロールが干渉してしまいます。

Question

GSAPのscrollmagicとtweenmax、timelinemaxを使用して途中から要素を固定してスクロールに連動するアニメーションを追加しているのですが、そのサイトに慣性スクロールのプラグインを導入（luxy.js)したところピン留めしてる要素がカクカクと動いてしまい見ていられなくなる現象が発生しました。
この二つの機能を両立させることはできないものでしょうか？

デモサイト

こちらにございます。
https://codepen.io/jun94516/pen/GREVZKR

jsの記述

      var duration = "200%"
      $(function () { // wait for document ready
        var controller = new ScrollMagic.Controller();
        var animation = new TimelineMax()
          .to("#animationContent", 1,   {transform: "rotateY(90deg)",delay: 0.3, ease: Expo.easeInOut })
          .to("#animationContent", 1,   {transform: "rotateY(0deg)",delay: 0.3, ease: Expo.easeInOut }) 
        new ScrollMagic.Scene({
            triggerElement: "#animationContent",
            triggerHook: 0.2,
            duration: duration
          })
          .setPin("#animationContent")
          .setTween(animation)
          .addTo(controller);
      });

参考サイト

https://www.buddiesapp.jp/
こちらのサイトでは二つの機能を両立した仕様になっております。

考えられる原因

参考サイトのソースコードを確認したのですが、慣性スクロールを使用するにはbody要素などをposition:fixed;などで浮かせ横幅と縦幅を指定し、子要素（mainなど）をスクロールに連動してtranslateで動かすという仕様になってるのが一般的だと思うのですが、
それがscrollmagicのsetpinのオプションを使用することで適用される要素に対して干渉しているのかな？と考えました。
参考サイトとの違いはposition;fixedの有無になってるかと思います。

試したこと

慣性スクロール用のプラグインや慣性スクロールを自作されてる方のソースコードなど少し試したが、結局解決できず（結局上記が原因？）になります。

どうしたいか

プラグインなどの導入で解決できるのであればそれが一番手っ取り早いので解決したいです。

もし根本のgsapの使用を変更（setPinをやめる）などで代替えができるのであれば改善案をいただきたいです。

参考サイトのようにスクロールに応じてtraslateで上に動かしピン留めのようにする仕様に変更するのもありですが、恐縮ながらjsの知識が乏しく自作することができませんでした。

以上どなたかご教授いただけたら幸いです。