Trouble using GetDocumentById for animation info

[cooganb]

Hi there!

 

I've been trying to follow the "Writing Smarter Animation Code" article. This includes compacting animations into functions, which can then be imported into a master timeline.

 

I'm having some trouble with using DOM element manipulation in the functions. The function in the above example fails when I try to run it, saying `vars` using .GetDocumentById has not been assigned. However, when the logic is moved from function to the body of the JS doc, the animation works (which you can see commented out in the Codepen).

 

Any advice from folks? Thanks in advance!

See the Pen WNNMdrb by cooganb (@cooganb) on CodePen.

[ZachSaucier]

Hey cooganb,

 

The console is throwing an error at this line: 

var tl = TimelineMax(); 

You're missing the new keyword  

var tl = new TimelineMax();

Side note, in the next version of GSAP (to be released soon) this sort of error can't happen! ?

 

Happy tweening.

[cooganb]

Thank you so muucchhh!!

[cooganb]

@ZachSaucier

One more quick question! Any idea as to why the function is only working for the first ellipse and not the later ones?

 

See the Pen WNNMdrb by cooganb (@cooganb) on CodePen.

[ZachSaucier]

11 minutes ago, cooganb said:

Any idea as to why the function is only working for the first ellipse and not the later ones?

You have repeat: -1 on the each inner timeline. So the first timeline of the master timeline keeps getting repeated and the second one is never reached  You should probably put repeat: -1 on the master timeline instead.

[cooganb]

Perfect! @ZachSaucier you all are amazing! Thank you.