Jump to content
Search Community

Timeline onComplete or .then()

Romann test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hi everyone, 

 

Have a quick question,  I have a timeline, i am using this timeline multiple times in my project to animate text. In one instance i want to call a function at the end of timeline animation.  I am able to use then() like this:

 

this.tl.timeScale(1).reverse(1).then(this.uiUpdater);

 

It works, but i have to pass some parameters for my "this.uiUpdate" function, and if i do so like this: .then(this.uiUpdater(curui,this.projects) this function executes immediately without waiting for the timeline to complete. I was thinking about somehow eliminating the need for passing parameters but got another problem, i am loosing access to "this" inside my callback function (this.uiUpdater) so i am not able to access needed parameters.

 

I know i can use onComplete constructor but the problem is if i apply it on the timeline it is going to execute every time i use this timeline, so i need somehow to execute it only when needed

 

onComplete: this.uiUpdater,
onCompleteParams:[curui,this.projects],

 

What would be the best approach to this problem ? Any other solutions possible ? 

 

Ideally  - .then() approach works great for me only if i can somehow pass needed parameters.

 

Thank you ! and sorry no codepen example yet, project is kind of big,  if my question is unclear, i will go ahead and build simplified  version for codepen. 

Link to comment
Share on other sites

Glad to hear eventCallbacks() worked for you. FYI, this is just a JavaScript thing: 

// invokes immediately uiUpdater() and the RESULT is fed to then(): 
.then(this.uiUpdater(curui,this.projects));

// wrap it in a function declaration to wait:
.then(() => this.uiUpdater(curui,this.projects));

But I'm not sure if you're mutating curui and this.projects between those calls; if so, you'd need to handle it a bit differently. Just ask if you need help with that. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Glad to hear eventCallbacks() worked for you. FYI, this is just a JavaScript thing: 



// invokes immediately uiUpdater() and the RESULT is fed to then(): 
.then(this.uiUpdater(curui,this.projects));

// wrap it in a function declaration to wait:
.then(() => this.uiUpdater(curui,this.projects));

But I'm not sure if you're mutating curui and this.projects between those calls; if so, you'd need to handle it a bit differently. Just ask if you need help with that. 

 

Thank you for this solution, this one works even better because now i have access to "this" inside my callback function and with eventCallback "this" returned undefined. 

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.
×
×
  • Create New...