GSAP onUpdate callback doesn't provide consistent progress value

[willdzoan31]

I have a piece of code like this:

 

    tl.current = gsap.timeline({
      scrollTrigger: {
        trigger: "#appContainer",
        start: "top top",
        end: "bottom bottom",
        pin: "#app",
        srub: 1,
        onUpdate: (e) => {
          if (e.direction === 1) {
            for (let index in elements.children) {
              let mesh = elements.children[index]
              let position = mesh.position
              position.z += 0.05 * e.progress
            }
          }
          else {
            for (let index in elements.children) {
              let mesh = elements.children[index]
              let position = mesh.position
              position.z -= 0.05 * e.progress
            }
          }
        }
      }
    })

 

Basically what I'm trying to do is animate an object inside a threejs scene during scrolling, 2 ifs to make that object return to the normal position when scroll up.

But I notice that whenever I console.log the e.progress value, it's not the same (might be because of debounce or throttle?), especially when I scroll fast. Can you guys help me to see if there's a better way to do it? Essentially  I want that value of position.z to be the same as starting when the user scroll up.

 

 

[GreenSock]

Hi @willdzoan31. Yeah, the way you're setting up that logic can't possibly work the way you're describing. Your code depends on the onUpdate getting called at exactly the same progress values in both directions. That's not how it works - an onUpdate gets called when the scroll position changes. If you scroll slowly, that might be 114 times (or whatever), and if you scroll super fast it might be 1 or 2. 

 

I think you're actually overcomplicating things quite a bit - is there a reason you don't just animate the position.z with a GSAP tween? It's hard to offer a solution without a minimal demo, but something like: 

let positions = elements.children.map(child => child.position);
gsap.to(positions, {
  z: "+=100", // or an absolute value or whatever
  ease: "none",
  scrollTrigger: {
    trigger: "#appContainer",
    start: "top top",
    end: "bottom bottom",
    pin: "#app",
    srub: 1
  }
});

That way, it'll always interpolate exactly the same way up and down. No complicated conditional logic inside an onUpdate attempting to increment values. 👍

 

Also, be careful about this: 

start: "top top",
end: "bottom bottom"

If, for example, the element is 100vh tall, the top would hit the top of the viewport at exactly the same time the bottom hits the bottom of the viewport, thus it wouldn't last at all. Maybe it's fine in your project because the element is much taller - I just thought I'd mention it because I've seen people make that logic mistake before. They often mean to do end: "bottom top"

[willdzoan31]

Thank you @GreenSock, I didn't know you can increase the z value like that. Will try that one out!

 

And for the second part that you talked about, I've setup my container to have 300vh and my app is 100vh (#app is inside the #appContainer), so it animates the way I expected

[GreenSock]

23 minutes ago, willdzoan31 said:

Thank you @GreenSock, I didn't know you can increase the z value like that. Will try that one out!

Yep, GSAP can animate literally any property of any object. You can even use one animation to animate the properties of another animation instance. 🤯

[willdzoan31]

Hmm that's interesting! So can I change react state with Tween like you mentioned above?

[GreenSock]

I'm not entirely sure what you mean by "react state", but literally any property of any object can be animated. It doesn't matter if it's a React object, generic, whatever. 

 

let obj = {myProp: 100};

gsap.to(obj, {
  myProp: 500,
  duration: 2,
  onUpdate: () => console.log(obj.myProp)
});

 

[willdzoan31]

So in a React application like this for example:

const [state, setState] = useState(0)

the state can only be changed/updated via the setState(value).

 

And in your example, you're changing the value directly, which won't work in a React application I believe. So I'm just curious, is there anyway for me to call the setState(value) during that?

[GreenSock]

Sure, in the onUpdate.