Why does Scrolltrigger not update my dynamically x value on window resize?

Question

First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.'

The x value is based on a formula I wrote.

Here is a part of the function later added in a master timeline with matchMedia Scrolltrigger:

    var seoShowBenefitsTl = gsap.timeline();
    seoShowBenefitsTl.addLabel("first Benefit")
        .to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit")
        .to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in,  onUpdate: function() {
            if (this.progress() >= 0.5) {
                document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged");
                document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged");
            } else {
                document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged");
                document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged");
            }
        }}, "first Benefit")
    //some more code
    return seoShowBenefitsTl

Thank you so much in advance!

Please make a [minimal, complete, and verifiable example](https://stackoverflow.com/help/minimal-reproducible-example). Side note, check out [the most common GSAP mistakes[(https://greensock.com/mistakes/). — Zach Saucier, Oct 14 '21 at 15:11
I made a demo: https://codepen.io/dr_pxl/pen/QWMjqPW Some notes to the demo: The red cube should move to the center of the window after scrolling. It works fine, but after resizing the window, it moves not to the center. If I reload the pen (on same window size it didn't work before) and try again it works again. — Andreas Markl, Oct 19 '21 at 09:08

score 0 · Answer 1 · answered Oct 19 '21 at 13:52

Make sure you add the actual tween to the ScrollTrigger timeline, not a timeline. This helps making sure the values get update easier because of the following point.
Use invalidateOnRefresh: true on the ScrollTrigger timeline.

Doing those things results in this demo.

Why does Scrolltrigger not update my dynamically x value on window resize?

1 Answers1