GSAP parallax image in mask

This is the styling for a 2:1 ratio of image

This is the styling for a 1:2 ratio of image

Add a class of ‘gsap-image-in-mask’ to the image block

gsap.registerPlugin(ScrollTrigger);

function initImageParallax(){

    gsap.utils.toArray('.gsap-image-in-mask').forEach(section => {

        const image = section.querySelector('img');

        gsap.to(image, {
            yPercent: 30,
            ease: 'none',
            scrollTrigger: {
                trigger: section,
                start: 'top bottom',
                scrub: true,
                // markers: true
                
            }
        });

    });
 
}
function init(){
    initImageParallax();
}

window.addEventListener('load', function(){
    init();
});
.gsap-image-in-mask {
    padding-bottom: 50%;
    position: relative;
    overflow: hidden;
    img {
        opacity: 1;
        height: 120%;
        top: -20%;
        position: absolute;
        object-fit: cover;
        object-position: 50% 50%;
    }
}

Search the site

Back to top