Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RaoulUnger

ScrollTrigger issue: scrub does not return to original state

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

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?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
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

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

  • Like 2
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.
×