GSAP Image with parallax effect

wp.domReady( () => {
	wp.blocks.registerBlockStyle( 
		'core/image', {
			name: 'with-parallax',
			label: 'With Parallax',
		}
	);
} );

gsap.registerPlugin(ScrollTrigger);
// Parallax Images
function initImageParallax() {
  // select all sections with a parallax image
  gsap.utils.toArray('.is-style-with-parallax').forEach(section => {
      // get the image
      const image = section.querySelector('img');
      // create tween for the image
      gsap.to(image, {
          // increase this to have more movement and match the SCSS
          yPercent: 20,
          ease: 'none',
          scrollTrigger: {
              trigger: section,
              start: 'top bottom',
              scrub: true
          }
      });
  });
}
window.addEventListener('load', function(){
    initImageParallax();
});

.is-style-with-parallax {
	&.wp-block-image {
	    // this is the default padding-bottom for a ratio 2:1 image
		padding-bottom: 50%;
		position: relative;
		overflow: hidden;
	}
	img {
		position: absolute;
		object-fit: cover;
		object-position: 50% 50%;
		opacity: 1;
		max-width: none;
		// increase the image size to allow for the movement behind the container mask
		// SHOULD line up with GSAP yPercent 
		left: -10%;
		width: 120%;
		height: 120%;
		top: -20%;
	}
}

    $( ".is-style-with-parallax img" ).each(function( index ) {
      var width = $(this).attr('width');
      var height = $(this).attr('height');
      var ratio = height / width * 100;
      $(this).parent().css("padding-bottom", ratio + "%");
    });