image section fix

src/components/sections/ImageSection.vue

@@ -22,51 +22,48 @@ let ctx;
 let flipCtx;
 
 const createTween = () => {
-  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+  const galleryElement = gallery.value;
+  const galleryItems = galleryElement.querySelectorAll(".gallery__item");
 
-  let galleryElement = gallery.value;
+  galleryElement.classList.add("gallery--final");
-  let galleryItems = galleryElement.querySelectorAll(".gallery__item");
+  const state = Flip.getState(galleryItems);
-
-  flipCtx && flipCtx.revert();
   galleryElement.classList.remove("gallery--final");
 
-  flipCtx = gsap.context(() => {
+  const flip = Flip.to(state, {
-    galleryElement.classList.add("gallery--final");
+    simple: true,
-    const state = Flip.getState(galleryItems);
+    ease: "expoScale(1,5)",
-    galleryElement.classList.remove("gallery--final");
+  });
 
-    const flip = Flip.to(state, {
+  gsap
-      simple: true,
+    .timeline({
-      ease: "expoScale(1,5)",
-    });
-
-    const tl = gsap.timeline({
       scrollTrigger: {
         trigger: galleryElement,
         start: "center center",
         end: "+=100%",
         scrub: true,
         pin: galleryElement.parentNode,
+        invalidateOnRefresh: true,
       },
-    });
+    })
-
+    .add(flip);
-    tl.add(flip);
-  }, section.value);
 };
-onUnmounted(() => {
-  ctx.revert();
-  flipCtx?.revert();
 
-  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+onMounted(() => {
+  ctx = gsap.context(() => {
+    createTween();
 
-  window.removeEventListener("resize", createTween);
+    window.addEventListener("resize", () => {
+      ScrollTrigger.refresh();
+    });
+  }, section.value);
+
+  requestAnimationFrame(() => {
+    ScrollTrigger.refresh();
+  });
 });
 
 onUnmounted(() => {
-  ctx.revert();
+  ctx?.revert();
-  flipCtx?.revert();
-
-  window.removeEventListener("resize", createTween);
 });
 </script>
 <template>