gsap animation works wrong on mobile devices

Question

the gsap.to acts like gsap.form on mobile devices only it works on desktop and mobile view on pc

the function i use

import gsap from "gsap";
import { ScrollTrigger } from "gsap/all";
gsap.registerPlugin(ScrollTrigger);
export const animateWithGsap = (target, animationProps, scrollProps) => {
  gsap.to(target, {
    ...animationProps,
    scrollTrigger: {
      trigger: target,
      toggleActions: "restart reverse restart reverse",
      start: "10% bottom",
      ...scrollProps,
    },
  });
};

 useGSAP(() => {
    animateWithGsap(".g_fadeIn", {
      opacity: 1,
      y: 0,
      duration: 1,
      ease: "power2.inOut",
    });
  }, []);

the code where the problem occurs

<div className="hiw-text-container">
  <div className="flex flex-1 justify-center flex-col">
    <p className="hiw-text g_fadeIn">
      A17 Pro is an entirely new class of iPhone chip that delivers our{" "}
      <span className="text-white">best graphic performance by far</span>.
    </p>

    <p className="hiw-text g_fadeIn pt-4">
      Mobile{" "}
      <span className="text-white">games will look and feel so immersive</span>,
      with incredibly detailed environments and characters.
    </p>
  </div>

  <div className="flex-1 flex justify-center flex-col g_fadeIn">
    <p className="hiw-text">New</p>
    <p className="hiw-bigtext">Pro-class GPU</p>
    <p className="hiw-text">with 6 cores</p>
  </div>
</div>;

on pc mobile view enter image description here

on android devices enter image description here

The default for text is opacity 0, supposed to be 1 using gsap

live demo :link