Immediate execution of tween on page reload

[blende64]

Hello

I have a page with a fixed header. The header should be transparent when the page is initially loaded. When the user scrolls about 100 pixels, the header should get a background color. I was able to implement this in the attached CodePen. However, I have noticed the following problem: If the user scrolls to section 3, for example, and then reloads the page, the header is displayed transparently for a brief moment until the tween has been executed. How can I ensure that the header is immediately provided with the background color when the page is reloaded?

Thank you very much

See the Pen abMEVLJ by blatthirsch (@blatthirsch) on CodePen

[Rodrigo]

Hi,

 

I'm not sure I follow 100% what you're trying to do, but maybe something like this?

 

t = gsap.to("#header_bg", {
  autoAlpha: 1,
  scrollTrigger: {
    trigger: "#content",
    start: "+=100px",
    toggleActions: "play none none reverse",
  }
});

if (window.scrollY >= 100) {
  t.progress(1);
}

Hopefully this helps.

Happy Tweening!

[blende64]

Hello Rodrigo

 

Oh boy, I could have thought of that. That was exactly the solution. Thank you very much.

 

Kind regards