Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thefyrewire

Can't use GSAP in a function? (Animate CC)

Recommended Posts

Hello, first-time poster here!

 

I'm an HTML5/Animate CC newbie (and not really a dev in general, just doing this for fun and learning) and I was wondering if someone could tell me what I'm doing wrong here. I would like to be able to use GSAP to animate a vector file I'd add to the stage and would need to be able to make it animate when I call a function, however when I try to do this I keep getting cannot tween a null object, but if it's not wrapped in a function the animation plays fine.

 

I created a new HTML5 canvas to see if I had the same problem, and I did:

 1. Added a symbol to a blank HTML5 canvas, made it a MovieClip and drew a circle. I called the instance mcThing
 2. In the Timeline, I selected the first frame and went into Actions
 3. I wrote:

function playAnimation() {
    TweenMax.to(this.mcThing, 3, {y:500});
    }
playAnimation();

 

 4. When testing in Chrome, I get cannot tween a null object. If I reference it as mcThing (omitting the this. I instead get mcThing is not defined.
 5. If I then remove the function and just have this:

TweenMax.to(this.mcThing, 3, {y:500});

 

It plays fine, but now I can't call it when I need to.

 

Some context:

Essentially what I currently have is a WebSocket listening for messages. When it receives a message, it's added to the queue. I am trying to get it to play an animation and insert the text from that message. The text itself should be okay: I used CreateJS to instantiate a text in the code and TweenMax works there, the problem is animating shapes/drawings. I suppose I could instantiate all the shapes in the code itself and TweenMax would work then but I don't think this is realistic as the animation/shapes are fairly complex, so I'm trying to target the stage. The animation would play out, stop, then the message would be removed from the queue and the next one would play (same animation, different text).

 

I think this is a scope issue, but I'm not sure what I need to change. I have used GSAP in AS3 recently and it was working completely fine within functions. Any help would be much appreciated!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Yeah, moving from AS3 to EaselJS has some super frustrating stumbling blocks.

 

2 options.

 

1: Create a global reference to the stage (aka root) like

var root = this;
function playAnimation() {
    TweenMax.to(root.mcThing, 3, {x:500});
}
playAnimation();

 

2: pass the scope into the function

function playAnimation(scope) {
    TweenMax.to(scope.mcThing, 3, {x:500});
}
playAnimation(this);

 

I prefer option 1.

 

  • Like 3
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.
×