Jump to content
GreenSock

pragmatic

maintaining scope on eventCallback

Go to solution Solved by pragmatic,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all

 

I'm trying to call a function that moves to the next page of my project once the user clicks a button. this would be fairly straightforward if it wasn't for the fact that a timeline animation happens first when the user clicks said button.

 

from what I can gather, as things stand "this" is returning a greensock object rather than a jQuery object (I'm kinda new to web development so forgive me if my terminology is a bit all over the place!)

 

I'm trying to bind "this" back to my document so I can call whatever I need to but try as I might I cant seem to find anything in the documentation that is quite what I need.

 

it all starts with this

this.listenTo(this.$button, "onClick", this.nextTransition);

which then runs this function

nextTransition: function () {
   this.tl.eventCallback("onReverseComplete", this.handleContinue);
   this.tl.reverse(0);
},

however when the next function is run

handleContinue: function () {
   console.log(this);
},

I get this in my console

s {vars: Object, _totalDuration: 3.95, _duration: 3.95, _delay: 0, _timeScale: 1…}

So my question is:

 

How do I set "this" to be what I need it to be? (i.e not the timeline)

 

Hope that all makes sense, I'm still getting my head around all the terminology.

 

Thanks in advance for any assistance you can offer me.

Link to comment
Share on other sites

  • Solution

well I'll answer this one myself, since I think I figured it out just incase anyone else runs into the problem.

this.tl.eventCallback("onReverseComplete", this.handleContinue, null, this);

Basically spent more time reading the docs page http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/eventCallback/

 

When I first tried to play around with this I ommited "null" from my code as I presumed that greensock would guess that if I left that field empty it would default to null anyway but either it does and I messed up my code or it doesn't and I should have included it.

 

Either way problem solved and hopefully this helps someone out in the future.

  • Like 2
Link to comment
Share on other sites

Thanks for reporting back about the solution you found to your own question. Good job ;)

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.
×