Jump to content
Search Community

ScrollTrigger issue: scrub does not return to original state

RaoulUnger test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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
  }
});

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
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...