GSAP reveal image on scroll

wp.domReady( () => {
	wp.blocks.registerBlockStyle( 
		'core/image', {
			name: 'reveal-image',
			label: 'Reveal Image',
		}
	);
} );

gsap.registerPlugin(ScrollTrigger);
// add active class when image is 100px from the bottom
function initRevalImage() {
  gsap.utils.toArray(".is-style-reveal-image").forEach(function(section) {
    // var media = section.querySelector("img");
    ScrollTrigger.create({
      trigger: section,
      start: "top bottom-=100px",
      toggleClass: {targets: section, className: "active"}  
    });
  });	
}
window.addEventListener('load', function(){
    initRevalImage();
});

// bg fill colours
.is-style-reveal-image {
    background: linear-gradient(to left, $color_tertiary, $color_quaternary);
}
// set cliping path and transitions for figure and image
.is-style-reveal-image {
	-webkit-clip-path: inset(100% 0 0 0);
	clip-path: inset(100% 0 0 0);
	line-height: 0;
	position: relative;
	transition: -webkit-clip-path .7s 0s cubic-bezier(0.5, 0.06, 0.01, 0.99);
	transition: clip-path .7s 0s cubic-bezier(0.5, 0.06, 0.01, 0.99);
	transition: clip-path .7s 0s cubic-bezier(0.5, 0.06, 0.01, 0.99), -webkit-clip-path .7s 0s cubic-bezier(0.5, 0.06, 0.01, 0.99);
	img {
		-webkit-clip-path: inset(100% 0 0 0);
		clip-path: inset(100% 0 0 0);
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		transition: -webkit-clip-path .7s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99),-webkit-transform .85s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99);
		transition: clip-path .7s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99),transform .85s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99);
		transition: clip-path .7s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99),transform .85s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99),-webkit-clip-path .7s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99),-webkit-transform .85s .35s cubic-bezier(0.5, 0.06, 0.01, 0.99);
	}
}
// change cliping path and transitions for figure and image on ACTIVE
.is-style-reveal-image.active {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	img {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}