Maldives Parallax

		
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<script>
    gsap.registerPlugin(ScrollTrigger);
    
    let valorMaskSize = "3000vw"

    if(window.innerWidth < 1000){
        valorMaskSize = "4000vw"
    }
    
    gsap.to(".mask", {
        maskSize: valorMaskSize,
        maskPosition: "53% center",
        scrollTrigger: {
            trigger: ".container",
            pin: true,
            scrub: 2,
            start: "top top",
            end: "bottom 20%",
        }
    })
    
    gsap.from(".txtEfeito", {
        opacity: 0,
        y: 20,
        stagger: .4,
        scrollTrigger: {
            trigger: ".content",
            scrub: 1,
            start: "top top",
            end: "bottom 20%",
        }
    })
</script>