[Data-lag not working for spans inside h1]

@akapowl can we use another approach for solving this issue? I want to have gradient color for my text and it breaks as soon as I set display: inline-block to span. Same happens when I set display: flex to h1.

See the Pen rNdMaQm by PraneetDixit (@PraneetDixit) on CodePen

[Data-lag not working for spans inside h1]

I want to create a stagger effect using ScrollSmoother. I wrap individual letters of a word inside a span and then apply lag to each of them. This works well. But when I introduce an h1 tag as a wrapper for these spans, this no longer works. Any suggestions?

See the Pen ExEgxJP by PraneetDixit (@PraneetDixit) on CodePen

[Parallax scrolling not working on pinned element]

I have a simple setup in which an element (`main`) is getting pinned, then an animation runs on its child. The pinned container has a background image which has `background-attachment: fixed`. However, this property seems to have no effect.

If I remove just the `pin` property, everything works fine. How can I solve this issue?

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

[Update variable inside gsap matchMedia on every resize | ScrollTrigger]

@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.

[Update variable inside gsap matchMedia on every resize | ScrollTrigger]

@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.

[Update variable inside gsap matchMedia on every resize | ScrollTrigger]

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?