Background Gradients

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

.block-background-gradients {
	position: relative;

	&:before {
		width: 100%;
		aspect-ratio: 1080/1920;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		pointer-events: none;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0;
		transition: 0.6s var(--ease);
		transition-property: opacity;

		@include bp($lg) {
			aspect-ratio: 1920/1080;
			background-size: contain;
		}
	}

	&.active {
		&:before {
			opacity: 1;
		}
	}

	&.left {
		&:before {
			transform: translate3d(0,-15%,0);
			background-position: left center;
			background-image: url('/wp-content/themes/hub-box/assets/images/bg-gradient--left.svg');
		}
	}

	&.right {	
		&:before {
			background-position: right center;
			background-image: url('/wp-content/themes/hub-box/assets/images/bg-gradient--right.svg');
		}
	}

	&.center {
		&:before {
			background-position: center center;
			background-image: url('/wp-content/themes/hub-box/assets/images/bg-gradient--right.svg');
		}
	}
}

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

class BackgroundGradients  {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		ScrollTrigger.create({
			trigger: this.block,
			start: 'top 80%',
			end: 'bottom -80%',
			toggleClass: {
				targets: this.block,
				className: "active", 
			},
		});
	}
}

document.querySelectorAll('.block-background-gradients').forEach((block) => {
	new BackgroundGradients( block );
});