Getting eventCallback to set onComplete

[NickWoodward]

Bonjour!

Simple one I'd guess - Reckon I've just misunderstood how to implement the `eventCallback` function - But I can't see what I'm missing and not been able to find a similar problem 🤔. Any clues appreciate!

(*edit: it's not outputting 'hello' to the console )
 

let tl;

function callback(str) {
  console.log(str);
}

function testIn() {
    tl = gsap.timeline({
        defaults: { duration: .5 },
    })
    .to('.test', {  opacity: 1 })
}

function testOut(callback) {
    tl.eventCallback("onComplete", callback)
    tl.reverse();
}

document.querySelector('.btnIn').addEventListener('click', (e) => {
  testIn();
});
document.querySelector('.btnOut').addEventListener('click', (e) => {
  testOut(callback.bind(null, 'hello'));
});

 

See the Pen MWoxEza?editors=1111 by nwoodward (@nwoodward) on CodePen

[OSUblake]

Any reason you are using eventCallback instead of just defining the callbacks up front?

 

tl = gsap.timeline({
  defaults: { duration: .5 },
  onComplete() {
 	... 
  },
  onReverseComplete() {
 	... 
  }
})

 

Anyways, you're probably looking for onReverseComplete since you're reversing your timeline. onComplete will fire when your timeline is going forward.

 

[NickWoodward]

The callback is from a controller and I didn't want to export it to the view. Figured it was the right structure 🤷‍♂️

No idea how I didn't spot onReverseComplete - thanks!