Cards Grid

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-cards-grid {
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);

	.e-block {
		margin-bottom: rem-calc(40);

		@include bp($lg) {
			width: auto;
			height: auto;
			padding-top: (287 / 477) * 100%;
			margin-bottom: rem-calc(80);
		}
	}
}

class CardsGrid {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-cards-grid');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const featuredBlocks = block.querySelectorAll(".e-block");

			if (featuredBlocks !== null)  {
				gsap.set(".block-cards-grid .e-block", {y: 50, opacity: 0});

				ScrollTrigger.batch(".block-cards-grid .e-block", {
					start: "top 100%",
					onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger:  0.15, overwrite: true}),
					onLeave: batch => gsap.set(batch, {opacity: 0, y: -50, overwrite: true}),
					onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
					onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 50, overwrite: true}),
				});

				ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".block-cards-grid .e-block", {y: 0}));
			}
		});
	}
}

new CardsGrid();