This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Florian Pnn
Posted Apr 30 - Read on Facebook

I got an error while using the animation.on('end",...) that looks like :
"Uncaught TypeError: Cannot read property 'apply' of undefined"

Any idea where that can comes from?

8 Comments

Stephen Crowley

Using Chrome DevTools you could traceback the call stack- maybe see what you find there?

Florian Pnn

I tried it but when I saw that it was in framer.js I knew that I can't fix it myself without help :)

Here is the detail of the error :
exports.EventEmitter.EventEmitter.emit framer.js:3730
Animation._cleanup framer.js:4261
(anonymous function) framer.js:3985
Animation._finalize framer.js:4220
(anonymous function) framer.js:3985
(anonymous function) framer.js:4168
fn framer.js:3776

Stephen Crowley

Haha, I figured you did but had to throw it out there. :)

Tisho Georgiev

It means that Framer is trying to execute the callback function that you passed to .on('end', yourFunc), but the function was undefined.

Tisho Georgiev

It might be helpful to post a more complete snippet of your code.

Florian Pnn

Here is the both function used for this example : http://pastebin.com/2YGqLt70

Tisho Georgiev

Take a look at line 22:

movingRight.on('end',apparitionCard(currentView));

Framer expects you to pass a function to the .on('end') call. In your case, the function is apparitionCard. What you're doing instead, is passing the *result* of the apparitionCard function, which right now happens to be undefined (since all you do in it is console.log). Remember. This is a function:

apparitionCard

This is the result of the execution of the function (notice the parentheses):

apparitionCard(currentView)

By writing the latter in your .on('end') call, it's like having:

movingRight.on('end',undefined);

Which is obviously going to produce an error.
Now, people often encounter this problem because they want some argument to be passed to their callback function when it executes. What you wrote seems perfectly reasonable at first glance, but doesn't work for the reasons I outlined above. So let's see how we can solve this. First, let's give the .on('end') call the function it expects:

movingRight.on('end', function() { });

OK, this won't produce an error, but it also doesn't do anything. And of course, it's an empty function! So let's give it something to do. We want to execute apparitionCard with the currentView argument when the animation ends, so let's put that in the function body:

movingRight.on('end', function() { apparitionCard(currentView) });

And that's it. In plain English, when the animation completes, it will execute a function, which will then execute the apparitionCard function with the currentView parameter.

An alternative, but more advanced approach would be to write:

movingRight.on('end', apparitionCard.bind(this, currentView));

Hope this helps.

Florian Pnn

Tisho Thanks a lot! Now it's much more clear, you really explain it well! Can't be more agree with Koen when he said that you are training a JS designer army!

Read the entire post on Facebook