css-template_03

				
					// console.clear();

const { gsap, imagesLoaded } = window;

const buttons = {
	prev: document.querySelector(".btn--left"),
	next: document.querySelector(".btn--right"),
};
const cardsContainerEl = document.querySelector(".cards__wrapper");
// const appBgContainerEl = document.querySelector(".app__bg");

const cardInfosContainerEl = document.querySelector(".info__wrapper");


var slideIndex = 1;
showSlides();
    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("card");
        var totalSlides = slides.length;

        for (i = 0; i < totalSlides; i++) {
            	Array.from(slides).forEach(function(cardElement) {
    			cardElement.classList.remove('current--card', 'next--card', 'previous--card'); });

    			slides[i].style.display = "none";

        }


        var prevIndex = (slideIndex - 1 + totalSlides) % totalSlides;
        var nextIndex = (slideIndex + 1) % totalSlides;


        slides[prevIndex].style.display = "flex";
        slides[slideIndex].style.display = "flex";
        slides[nextIndex].style.display = "flex";

            slides[slideIndex].style.zIndex = "50";
			slides[prevIndex].style.zIndex = "20";
			slides[nextIndex].style.zIndex = "30";

        slides[prevIndex].classList.add("previous--card");
        slides[slideIndex].classList.add("current--card");
        slides[nextIndex].classList.add("next--card");
    }

    function changeSlide(n) {
        slideIndex = (slideIndex + n + document.getElementsByClassName("card").length) % document.getElementsByClassName("card").length;
        showSlides();
    }



    var slideIndex_info = 1;
    showSlides_info();
    function showSlides_info() {
        var i;
        var slides_info = document.getElementsByClassName("info");
        var totalSlides = slides_info.length;

        for (i = 0; i < totalSlides; i++) {

    			Array.from(slides_info).forEach(function(cardElement) {
    			cardElement.classList.remove('current--info', 'next--info', 'previous--info'); });

    			 slides_info[i].style.display = "none";
        }

        slides_info[slideIndex_info].style.display = "block";

        var prevIndex = (slideIndex_info - 1 + totalSlides) % totalSlides;
        var nextIndex = (slideIndex_info + 1) % totalSlides;

	    slides_info[prevIndex].classList.add("previous--info");
        slides_info[slideIndex_info].classList.add("current--info");
        slides_info[nextIndex].classList.add("next--info");

    }

    function changeSlide_info(n) {
        slideIndex_info = (slideIndex_info + n + document.getElementsByClassName("info").length) % document.getElementsByClassName("info").length;
        showSlides_info();
    }



buttons.next.addEventListener("click", () => swapCards("right"));

buttons.prev.addEventListener("click", () => swapCards("left"));

function swapCards(direction) {

	changeInfo(direction);
	swapCardsClass();

	removeCardEvents(currentCardEl);

	function swapCardsClass() {


		if (direction === "right") {

			changeSlide(1);


		} else if (direction === "left") {
				changeSlide(-1);
		}
	}
}

function changeInfo(direction) {
	let currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
	let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info");
	let nextInfoEl = cardInfosContainerEl.querySelector(".next--info");

	gsap.timeline()
		.to([buttons.prev, buttons.next], {
		duration: 0.2,
		opacity: 0.5,
		pointerEvents: "none",
	})
		.to(
		currentInfoEl.querySelectorAll(".text"),
		{
			duration: 0.4,
			stagger: 0.1,
			translateY: "-120px",
			opacity: 0,
		},
		"-="
	)
		.call(() => {
		swapInfosClass(direction);
	})
		.call(() => initCardEvents())
		.fromTo(
		direction === "right"
		? nextInfoEl.querySelectorAll(".text")
		: previousInfoEl.querySelectorAll(".text"),
		{
			opacity: 0,
			translateY: "40px",
		},
		{
			duration: 0.4,
			stagger: 0.1,
			translateY: "0px",
			opacity: 1,
		}
	)
		.to([buttons.prev, buttons.next], {
		duration: 0.2,
		opacity: 1,
		pointerEvents: "all",
	});

	function swapInfosClass() {

		if (direction === "right") {
	changeSlide_info(1);
		} else if (direction === "left") {
	changeSlide_info(-1);
		}
	}
}

function updateCard(e) {
	const card = e.currentTarget;
	const box = card.getBoundingClientRect();
	const centerPosition = {
		x: box.left + box.width / 2,
		y: box.top + box.height / 2,
	};
	let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);
	gsap.set(card, {
		"--current-card-rotation-offset": `${angle}deg`,
	});
	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
	gsap.set(currentInfoEl, {
		rotateY: `${angle}deg`,
	});
}

function resetCardTransforms(e) {
	const card = e.currentTarget;
	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
	gsap.set(card, {
		"--current-card-rotation-offset": 0,
	});
	gsap.set(currentInfoEl, {
		rotateY: 0,
	});
}

function initCardEvents() {
	const currentCardEl = cardsContainerEl.querySelector(".current--card");
	currentCardEl.addEventListener("pointermove", updateCard);
	currentCardEl.addEventListener("pointerout", (e) => {
		resetCardTransforms(e);
	});
}

initCardEvents();

function removeCardEvents(card) {
	card.removeEventListener("pointermove", updateCard);
}

function init() {

	let tl = gsap.timeline();

	tl.to(cardsContainerEl.children, {
		delay: 0.15,
		duration: 0.5,
		stagger: {
			ease: "power4.inOut",
			from: "right",
			amount: 0.1,
		},
		"--card-translateY-offset": "0%",
	})
		.to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
		delay: 0.5,
		duration: 0.4,
		stagger: 0.1,
		opacity: 1,
		translateY: 0,
	})
		.to(
		[buttons.prev, buttons.next],
		{
			duration: 0.4,
			opacity: 1,
			pointerEvents: "all",
		},
		"-=0.4"
	);
}

const waitForImages = () => {
	const images = [...document.querySelectorAll("img")];
	const totalImages = images.length;
	let loadedImages = 0;
	const loaderEl = document.querySelector(".loader span");

	gsap.set(cardsContainerEl.children, {
		"--card-translateY-offset": "100vh",
	});
	gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
		translateY: "40px",
		opacity: 0,
	});
	gsap.set([buttons.prev, buttons.next], {
		pointerEvents: "none",
		opacity: "0",
	});

	images.forEach((image) => {
		imagesLoaded(image, (instance) => {
			if (instance.isComplete) {
				loadedImages++;
				let loadProgress = loadedImages / totalImages;

				gsap.to(loaderEl, {
					duration: 1,
					scaleX: loadProgress,
					backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`,
				});

				if (totalImages == loadedImages) {
					gsap.timeline()
						.to(".loading__wrapper", {
						duration: 0.8,
						opacity: 0,
						pointerEvents: "none",
					})
						.call(() => init());
				}
			}
		});
	});
};

waitForImages();