Update variable inside gsap matchMedia on every resize

Question

I have a basic gsap animation set up with matchMedia.

ScrollTrigger.matchMedia({
    "(min-width: 700px)": function () {
        let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width);
        let tl = gsap.timeline({
            scrollTrigger: {
                / ....    
            }
        });
        tl.to(".logo-transparent", {
            x: containerWidth/2,
            scale: "0.8"
        });
    },
    "(max-width: 699px)": function () {
        let containerHeight = parseInt(getComputedStyle(document.querySelector(".see-through")).height);
        let tl = gsap.timeline({
            scrollTrigger: {
                / ....
            }
        });
        tl.to(".logo-transparent", {
            y: containerHeight/2,
            scale: "0.9"
        })
    }
});

Now what I want is to update the values of containerWidth and containerHeight on each resize event. I tried adding an eventListener for resize event and updating the variables, but it still has no effect on the animation.

Perhaps the animation is not updated on each resize unless the media breakpoints change.

What approach can I follow for the desired effect?

Answer 1

As I understand the documentation on https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener() there is an event of ScrollTrigger you can listen to:

• "refreshInit" - typically just after a resize occurs and BEFORE ScrollTrigger does all of its recalculating of start/end values in the [new] document flow. This will also happen when you call ScrollTrigger.refresh() directly.

I would also suggest to intiate your tl variable outside of the ScrollTrigger block.

So you might try something like this:

let tl = gsap.timeline({
    scrollTrigger: {
        // ....    
    }
});

ScrollTrigger.matchMedia({
    "(min-width: 700px)": min700px,
    "(max-width: 699px)": max699px
});

function min700px() {
    let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width);
    tl.to(".logo-transparent", {
        x: containerWidth/2,
        scale: "0.8"
    });
}

function max699px() {
    let containerHeight = parseInt(getComputedStyle(document.querySelector(".see-through")).height);
    tl.to(".logo-transparent", {
        y: containerHeight/2,
        scale: "0.9"
    });
}

ScrollTrigger.addEventListener("refreshInit", function () {
    ScrollTrigger.matchMedia({
        "(min-width: 700px)": min700px,
        "(max-width: 699px)": max699px
    });
});