Cannot tween a null target after .call()

[NUcreative]

Hello,

I am having issues after using the .call() to use a custom function (which play a sound). I always get Cannot tween a null target after in the console log.

Can you help me understand why? Thanks

 

// Sounds for the ANIMATIONS are collected in an Object
var sounds = {
   'creakingWood' : new Audio("../public/assets/sounds/077562105.mp3")
};

// Function to play the Sounds
function playSound(i) {
   sounds[i].play();
}

// Rotate to the left
$( "#caveSign1, #Sign4, #Sign8_1_").hover(
  function() {
    signAnimation
    .call(playSound('creakingWood'))
    .to($( this ), 1, {rotation: -8, ease: Power1.easeOut, transformOrigin:"50% 50%"});
    $(this).css('cursor','pointer');
},function() {
   signAnimation
   .to($( this ), 1, {rotation: 0, ease: Power1.easeOut, transformOrigin:"50% 50%"});
   $(this).css('cursor','default');
   }
);

 

The .call() is working but the .to() is not. If I swap them both works but I wish I was able to put the .call() function in between parts of the animations. Sorry, I am not an expert of GreenSock just taking hover another web developer.

 

Thanks

[Jonathan]

Hello @NUcreative and welcome to the GreenSock Forum!

 

Sorry your having this issue. To better help you, can you please create a a reduced codepen example? So we can see your code in context to test live in the browser.

 

 

This looks like this can resolved with the use of the GSAP position parameter. The last parameter for the call() and to()  method is the position parameter.

 

 

Thanks

[mikel]

Hi @NUcreative,

 

I'm not sure what the problem could be - so the best would be a CodePen as @Jonathan mentioned.

 

But please check your array construct. In my pen, sounds [0] has the output 'undefinded' (?).

Instead of .call I use onStart ...

 

 

See the Pen WRBKrd by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

[NUcreative]

Thanks a lot! I will have a little play and I will let you know. I will also try to set up a CodePen

[Carl]

Hi nuCreative,

 

Welcome to the GreenSock forums. As Jonathan mentioned, a small demo is always helpful.

Looking at your code it seems you just need to fix your call() syntax.

 

if you do 

 

.call(playSound('creakingWood')) 

 

the playSound() function will be executed immediately when you build the timeline, not when the timeline plays.

 

You need to give call() the name of the function you want called and the parameters in an Array. Docs for call().

.call(playSound, ["creakingWood"])

 

 

Here is a little demo of calling a function in the middle of a timeline and passing parameters:

See the Pen eEvjre?editors=1010 by GreenSock (@GreenSock) on CodePen

 

[NUcreative]

Thanks a lot Carl,

that's clear now. I should have read the documentation on the .call() method better. 

 

Thanks all for your help

[Carl]

No problem. I hope this experience of taking over this project gives you a positive experience with GSAP!