How to make observer animate more than once?

[FrEZ]

Currently my observer is animating only once forwards/backwards and doesn't animate again. Also I want it to animate 3 times in a row and can't figure out how. I know that my function limits it to only once. Would appreciate if someone could help!

 

function previous() {

    animating = true;

    gsap.to(camera.position, {

        ...cameraPositionsX['first'],

        duration: 1,

 

    })

}

function next() {

    animating = true;

    gsap.to(camera.position, {

        ...cameraPositionsX['second'],

    })

}

Observer.create({

    target: window,

    type: "wheel, scroll",    // touch?

    onUp: () => !animating && previous(),

    onDown: () => !animating && next(),

    onComplete: () => animating = false

  });

[GreenSock]

There's no such thing as onComplete on an Observer, so that's never getting called. I think you meant to put that on your tweens. 

 

Observer.create({
  onComplete:() => {...}, // <-- INVALID
  ...
});

So in the animation(s) you're creating in the next() and previous() methods, you'd just need to add an onComplete that sets animating back to false. 

 

I hope that helps.

[FrEZ]

28 minutes ago, GreenSock said:

There's no such thing as onComplete on an Observer, so that's never getting called. I think you meant to put that on your tweens. 

 

Observer.create({
  onComplete:() => {...}, // <-- INVALID
  ...
});

So in the animation(s) you're creating in the next() and previous() methods, you'd just need to add an onComplete that sets animating back to false. 

 

I hope that helps.

That helped, thanks! But I still can't figure out how to make my onUp and onDown go through several functions, not just one(meaning, change camera positions more than once). I saw a codepen using indexes, but it was in react and was very hard to understand. 

[Cassie]

Hey! I don't know what this is...
 

...cameraPositionsX['second'],

So it's a little hard to advise. Do you have a minimal demo?

I would imagine that you're either animating to specific fixed values in those tweens instead of relative values or you aren't toggling isAnimating back to false.