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?