console.clear();

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(Flip);

let flipCtx;

const createTween = () => {
 let galleryElement = document.querySelector("#gallery-8");
 let galleryItems = galleryElement.querySelectorAll(".gallery__item");

 console.log(flipCtx);

 flipCtx && flipCtx.revert();
 galleryElement.classList.remove("gallery--final");

 flipCtx = gsap.context(() => {
 // Temporarily add the final class to capture the final state
 galleryElement.classList.add("gallery--final");
 const flipState = Flip.getState(galleryItems);
 galleryElement.classList.remove("gallery--final");

 const flip = Flip.to(flipState, {
 simple: true,
 ease: "expoScale(1, 5)"
 });

 const tl = gsap.timeline({
 scrollTrigger: {
 trigger: galleryElement,
 start: "center center",
 end: "+=100%",
 scrub: true,
 pin: galleryElement.parentNode
 // markers: true
 }
 });
 tl.add(flip);
 return () => gsap.set(galleryItems, { clearProps: "all" });
 });
};
createTween();

window.addEventListener("resize", createTween);