Ericksen Julius

I have a problem with my gsap, it seems i can't make my image responsive when the window is resized, here's my code gsap.registerPlugin(MotionPathPlugin); // const bee4Atas = gsap.to("#phase1_lebah_4_atas", { // duration: 3, // ease: "none", // motionPath: { // path: "M145 1C43.4906 20.7739 -104.744 84.2574 114.394 180C49.306 126.057 64.6793 108.916 145 91.7071C68.8778 73.0773 68.7868 53.2371 145 1Z", // align: "self" // }, // repeat: -1 // }) let tween; function createTween() { let progress = tween ? tween.progress() : 0; tween && tween.progress(0).kill(); tween = gsap.to("#phase1_lebah_4_atas", { duration: 3, ease: "none", motionPath: { path: "#pathLebah4Atas", align: "#pathLebah4Atas", alignOrigin: [0.5, 0.5] }, repeat: -1 }) tween.progress(progress); } createTween(); window.addEventListener("resize", createTween); <div class="lebah4Atas-container absolute w-[8%] top-[4.7%] right-[15%] z-[25]"> <img src="{{ asset('/assets/home/new_phase1/lebah_4.png') }}" alt="Lebah 4 atas" id="phase1_lebah_4_atas" class="w-[100%]" loading="eager"> <svg width="146" height="181" viewBox="0 0 146 181" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="pathLebah4Atas" d="M145 1C43.4906 20.7739 -104.744 84.2574 114.394 180C49.306 126.057 64.6793 108.916 145 91.7071C68.8778 73.0773 68.7868 53.2371 145 1Z" stroke="black" /> </svg> </div>