ScrollTrigger issue: scrub does not return to original state

[RaoulUnger 4 Likes (Newbie)]

Hi,

 

I'm trying to convince a fixed background to change color when a wrapper passes the scroller-start point. I've set scrub to 'true', so that the whole thing happens with scroll speed, and reverses when scrolling back. See pen below.

The issue: it works fine as long as I scroll really slowly: the background goes from white to blue, and back. But when scrolling back a bit faster the background does not return completely to white (or sometimes not at all). This could off course help to take a slower pace in life, but here that's not the effect I intend to accomplish.  Does anyone have any idea how to improve this? Sorry if i've missed the obvious!

I've based this pen on another pen I found. There are several more pens around dealing with changing backgrounds with ScrollTrigger but they all differ in their approach, and often combine multiple effects making it harder to understand what's going on.

Cheers!

See the Pen oNGryZQ by RaoulUnger (@RaoulUnger) on CodePen

[elegantseagulls 1,239 Likes (Superhero)]

This is odd behavior... if you set scrub: 0.1, it does "fix" this, but not sure why it's it's doing this on scrub: true. Any thoughts here @GreenSock @OSUblake @Cassie?

[elegantseagulls 1,239 Likes (Superhero)]

Interestingly, it seems to only happen with a .fromTo animation. If I run it using a .to animation, it works just fine.

[Cassie 3,759 Likes (Superhero)]

I'm stumped. Not certain why that's happening.

I'd write it like this, which is working fine. But it would be good to understand why that approach isn't working.

 

gsap.to(".background", {
  backgroundColor: "#232E3E",
  scrollTrigger: {
    trigger: ".wrapper-2",
    markers: true,
    start: "top center",
    end: "top +=200px",
    scrub: true
  }
});

 

[GreenSock 16,314 Likes (Superhero)]

Sorry about that, @RaoulUnger - it was caused by a regression in 3.9.1 that's specific to .fromTo() tweens of CSS colors. It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js or of course you can just use 3.9.0 for now if you prefer. Or don't use .fromTo(), as @elegantseagulls and @Cassie suggested. 

See the Pen xxXovOO?editors=1010 by GreenSock (@GreenSock) on CodePen

[RaoulUnger 4 Likes (Newbie)]

Thank you all for the prompt replies and solutions!  I'm glad it wasn't me for a change  

 

I tried the .to variant on the website i'm applying this effect to, and that works fine, so i'll stick to that.

 

Thanks again!

Raoul