Issue with Scroll Magic Animation on Shopify (Liquid)

Question

I am integrating a animation using scroll magic. The animation is very basic. On scroll I am changing the top from 50% to 30% and at same time playing with opacity from 0 to 1.

I have first created HTML page of this and the animation is working fine. https://icon-ui.netlify.app/ Its the 2nd section on page with title => Create something entirely unique to you

Then I have passed the same code on Shopify platform and its not working on Shopify https://icon.in/ Its the 2nd section on page with title => Designed to add a touch of style to your journey.

If we check both the pages - the title on Shopify page doesnt comes as on netlify link. The top animation is not working. The css, js and HTML files are all same but still gives different result.

Can someone help me here please.

This is the piece of JS code below

<section class="bag_animaction">
  <div class="container">
    <div class="bag_anim_section">
      <div class="animaction_line">
        <img src="https://cdn.shopify.com/s/files/1/0832/4805/4580/files/bag_line.png?v=1695559184" class="img-responsive">
      </div>
      <div class="heading_text">
        <h2 class="m_tb_0">
          Designed to add a touch<br>of style to your journey.
        </h2>
        <p class="bag_para">Elevate Life's simple moments with our signature cabin luggage</p>
        <div class="pt_20">
          <a href="/collections/shop" class="primary_btn">Buy Now</a>
        </div>
      </div>
      <div class="bag">
        <img src="https://cdn.shopify.com/s/files/1/0832/4805/4580/files/bag.png?v=1695559184" class="img-responsive">
      </div>
    </div>
  </div>
</section>

<script>
var controller = new ScrollMagic.Controller();
  var tween1 = new TimelineMax();
  tween1.to(".bag", 1, { top: "50%" });
  tween1.to(".bag", 2, { top: "100%" }, "first");
  tween1.to(".heading_text", 1, { top: "30%", opacity: "1" }, "first");
  // tween1.to(".bag_animaction", 1, { className: "+=bag_animaction_t" });

  // build scene
  var scene = new ScrollMagic.Scene({
    triggerElement: ".bag_animaction",
    duration: 1500,
    triggerHook: 0,
  })
    .setTween(tween1)
    // .addIndicators({ start: 10 })
    .setPin(".bag_animaction")
    .addTo(controller);
<script>

The other animation is working fine but the title animation (50% to 30%) is not working