Update variable inside gsap matchMedia on every resize | ScrollTrigger

[Praneet Dixit]

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?

[Cassie]

Hi there Praneet,

 

Welcome to the forums. Thanks for the code snippet. It would be super helpful if you could put together a minimal demo on codepen for us!

 

Thanks so much

[Praneet Dixit]

@Cassie Here it is: 

See the Pen ZExQNaV by PraneetDixit (@PraneetDixit) on CodePen.

Steps to recreate issue:

1. Resize window so that the width is less than 700px.

2. On scrolling, the box should slide to center along the x-axis.

3. Now resize the window so that its width remains within the 700px limit.

4. On scrolling, the box will not slide perfectly into the center as the value of `containerWidth` is not updated.

[Cassie]

Hey again, thanks so much for the demo!

 

See the Pen vYRLqXW?editors=0010 by GreenSock (@GreenSock) on CodePen.

You can use functional values and invalidateOnRefresh -  I assume matchMedia is necessary for a more complex version of your animation as it's not doing anything here. I left it in anyway.

[Praneet Dixit]

@Cassie Thanks for your reply! It solves my issue.

Nice to know about functional values. By the way, the original implementation was quite complex and it required matchMedia but I reduced it for the sake of simplicity.

[Cassie]

I thought that was probably what was going on. Glad I could help! Good luck with the rest of your project.