OnComplete not working as expected on react-three-fiber

[Sam0505]

I am trying to create two subsequent animations on the cube in react-three-fiber. But I want to run the second animation(animateY) after I finish the first animation(animate) and that's why I am using onComplete function for the same. But I am getting the desired results as both animations run simultaneously. I have shared the relevant code and output for the issue. 

 

[GreenSock]

That's because you're not passing a function to the onComplete - you're literally invoking the function and assigning the RESULT to the onComplete. 

// bad
onComplete: myFunc()

// good 
onComplete: myFunc

When you put the () after the function reference, that invokes it. That has nothing to do with GSAP - it's just how JavaScript works. 

 

I'm curious why you're even using an onComplete like that instead of just leveraging the sequencing capabilities of timelines. For example: 

// clunky
let tl = gsap.timeline();
tl.to(obj, {
  x: 100,
  duration: 1,
  onComplete: () => animateY(200)
});
function animateY(value) {
  let tl = gsap.timeline();
  tl.to(obj, {
    y: value,
    duration: 1
  });
}

// much better/shorter
let tl = gsap.timeline();
tl.to(obj, {
  x: 100,
  duration: 1
});
tl.to(obj, {
  y: 200,
  duration: 1
});

If you still need help, please make sure you provide a minimal demo - that's much, much better than a video. We need to be able to see the issue in context and analyze the other aspects of the code/context. 

 

Lastly, if you're using React, it's really important that you do proper cleanup due to how React works. I'd strongly recommend reading this: 

Happy tweening!

 

 

[Sam0505]

Thank you. I am a new user and made a mistake understanding the syntax. 

The reason I am not using sequencing is because this is just a test run and in future, I want to automate the animation process so I was trying to set a kind of recursion so that when I add more positions on my Vector3 array, more animations can be added automatically.

But I found a better way of doing that by using timeline.add().