diff --git a/src/components/sections/ImageSection.vue b/src/components/sections/ImageSection.vue index 1f85679..19301f6 100644 --- a/src/components/sections/ImageSection.vue +++ b/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; - let galleryItems = galleryElement.querySelectorAll(".gallery__item"); - - flipCtx && flipCtx.revert(); + galleryElement.classList.add("gallery--final"); + const state = Flip.getState(galleryItems); galleryElement.classList.remove("gallery--final"); - flipCtx = gsap.context(() => { - galleryElement.classList.add("gallery--final"); - const state = Flip.getState(galleryItems); - galleryElement.classList.remove("gallery--final"); + const flip = Flip.to(state, { + simple: true, + ease: "expoScale(1,5)", + }); - const flip = Flip.to(state, { - simple: true, - ease: "expoScale(1,5)", - }); - - const tl = gsap.timeline({ + gsap + .timeline({ scrollTrigger: { trigger: galleryElement, start: "center center", end: "+=100%", scrub: true, pin: galleryElement.parentNode, + invalidateOnRefresh: true, }, - }); - - tl.add(flip); - }, section.value); + }) + .add(flip); }; -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(); - flipCtx?.revert(); - - window.removeEventListener("resize", createTween); + ctx?.revert(); });