Uncaught TypeError: Cannot call method 'to' of undefined

[bobdobbs]

I've been playing time with tweenmax. I pretty soon realized that I couldn't get the effect that I wanted without using timelinemax.

 

I'm loading tweenmax into my browser. But I cant do anything with it.

 

when I start do anything with tl.to(...) chrome's console give me the error "uncaught exception: cannot call method 'to' of undefined. Console references me to the line where I use 'tl,to().

 

The sample code I'm working with can be seen at hastebin.com/midacafegu.vbs

 

[jamiejefferson]

It looks like you probably haven't created a TimelineMax variable called tl at that point.

 

You'll need to make sure that you've created a timeline like the following before calling tl.to() etc:

var tl = new TimelineMax();
tl.to(...);

[bobdobbs]

Hi.

 

Sorry, my url to a paste was broken. My code is below.

 

As you can see, I have declared a timeline variable. But I still get the error.

 

The variable 'window.myApp.slides' points to a jQuery dom selector.

var slides =  window.myApp.slides ;
var tl = new TimelineMax(
    tl.to(
        slides,
        2,
        { left :  "0px" }
    )
    
    ) ;

[Rodrigo]

Hi,

 

The engine is reporting that slides is undefined, meaning that window.myApp.slides returns nothing.

 

The standard JQuery selector uses the Jquery function:

//if the item(s) have a class slides
var slides = $(".slides");

//if the imem have an ID slides
var slides = $("#slides");

Also you have a syntax error, you have to create the timeline and then add the particular tweens, like this:

var tl = new TimelineMax();

tl.to(
    slides,
    2,
    {left:0}
);

Check that the elements being animated have either a relative or absolute position.

 

Also it would be very helpful if you could create a codepen or fiddle in order to see what could be the problem.

 

And last but not least check the following links, they have the essential stuff to get started with the engine:

http://www.greensock.com/get-started-js/

 

http://www.greensock.com/jump-start-js/

 

http://www.greensock.com/sequence-video/

 

Hope this helps,

Rodrigo.

[bobdobbs]

 Hi. Thanks for the help.

 

I finally got it to work. I split the code into two lines. Instead of declaring and definging the variable 'tl' in one line, I did two experessions:

 

The first line declares, the second line defines.

var tl = new TimelineMax() ;
tl.to( slides, 2, { left : 0} ) ;

When I split my code into two lines the animation worked.

[Rodrigo]

Turns that Jamie was right about his presumption. Since you putted the call inside the variable creation the timeline wasn't created yet.

 

Glad you got it working.

 

Rodrigo.