Jump to content
Search Community

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

dr.Pxl test
Moderator Tag

Recommended Posts

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


I also built a little demo via codepen: 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.

You habe to open the pen for a better view.


Maybe someone can give me a little help. 
 

Thank you in advance!

See the Pen QWMjqPW by dr_pxl (@dr_pxl) on CodePen

Link to comment
Share on other sites

Hey @dr.Pxl

 

Try adding invalidateOnRefresh: true to your ScrollTrigger - that should do the trick.

 

From the ScrollTrigger documentation:

 

invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

See the Pen 2827a530689a5a53049cc37b058956ab by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...