Uncaught TypeError in tweenmax

[kleeman]

Hello,

 

I'm getting an error in chrome's console that I'm not having much luck debugging.

 

This is the error: 

 

Uncaught TypeError: l.apply is not a function

 

y @ TweenMax.min.js:14

n._callback @ TweenMax.min.js:16

l.render @ TweenMax.min.js:14d.render @ TimelineLite.min.js:12

n.render @ TweenMax.min.js:16O._updateRoot.

D.render @ TweenMax.min.js:16n.dispatchEvent @ TweenMax.min.js:16

g @ TweenMax.min.js:16

 

This is the function that is throwing the error. It actually animates fine but throws the error after the 4th "tweenmax.stagger"

 

function startAnimation() {

    

    

    

            var bg = $("#bg");

            var cup = $("#cup");

            var bottle = $("#bottle");

            var glow = $("#glow");

            var cta = $("#cta");

            var txt = $("#txt");

            var cta = $("#cta");

            var smoke = $("#smoke");

            var clicktag = $("#clicktag");

 

         

        

            var tl = new TimelineLite; 

                

            mySplitText = new SplitText("#txt", {type:"words,chars"}), 

            chars = mySplitText.chars; //an array of all the divs that wrap each character

            

            mySplitText2 = new SplitText("#txt2", {type:"words,chars"}), 

            chars2 = mySplitText2.chars; //an array of all the divs that wrap each character

            

            tl.timeScale(2.3);

            

            

            tl.append(TweenLite.from(bottle, 2, { x: "350",  ease: Circ.easeOut }));

            

 

            tl.append(TweenLite.from(cup, 2, {x: "-250", ease: Quad.easeOut }),-2);

            

            

            tl.append(TweenLite.from(smoke, 10, { alpha: 0, scaleY:.2, ease: Quad.easeOut }),-1); 

 

                        

            tl.append(TweenLite.to(smoke, 20, { alpha: 0, scaleY:7, scaleX:7, ease: Quad.easeIn }), -1); 

            

            

            tl.append(TweenMax.staggerFrom(chars, 4.5, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2, "+=0"), -28);

            

            tl.append(TweenMax.staggerTo(chars, 12, {className:"+=txtin"}, 0.17, 4), -25);

 

            /* first text out */

 

            tl.append(TweenMax.staggerTo(chars, 2, {className:"+=txtout"}, 0.08, -9),-18);

            

            tl.append(TweenMax.staggerTo(chars, 3, {opacity:0, scale:.8, ease:Circ.easeIn}, 0.02, "+=0"),-18);

            

            

            /* second text in */

             

            tl.append(TweenMax.staggerFrom(chars2, 3, {opacity:0, scale:0,  ease:Circ.easeOut}, 0.25, "+=0"),-17);

            

            tl.append(TweenMax.staggerTo(chars2, 6, {className:"+=txtin"}, 0.17, 4),-14);

 

             

            tl.append(TweenLite.from(glow, 3, { alpha: 0, ease: Quad.easeOut }),-10); 

 

            

            tl.append(TweenLite.from(cta, 2, { alpha: 0, ease: Quad.easeInOut }),-8); 

       

            TweenLite.set($("#content"), {

                visibility: "visible"

            });

 

                      

  

}

 

thank you for any assistance!

[Carl]

Sorry to hear you are having trouble.

 

It really helps for us to see all the HTML, CSS and JS code. Please fork this CodePen http://codepen.io/GreenSock/pen/rApJv and paste just enough CSS, HTML and JS to throw that error. In other words remove the code that works fine. That demo is loading SplitText, jQuery and latest TweenMax.min.js

 

At a quick glance it appears that you are passing too many parameters into your staggers

//not sure that the "+=0" should be there
tl.append(TweenMax.staggerFrom(chars, 4.5, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2, "+=0"), -28);

should be something more like

tl.append(TweenMax.staggerFrom(chars, 4.5, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2), -28);

and there is no reason to be using append() as it has been deprecated so your code could probably be

tl.staggerFrom(chars, 4.5, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2,  "-=28");

I'm guessing you are used to the old Flash API (very cool), but things have changed quite a bit.

Best thing to do is watch this video and study the demos: http://greensock.com/position-parameter

Also read through the TimelineLite docs about to(), from(), staggerFrom() 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

 

Oh and this cheat sheet from Petr Tichy is great: https://ihatetomatoes.net/wp-content/uploads/2015/05/GreenSock-Cheatsheet1.png

[kleeman]

Thanks for the quick response Carl. Yes, I'm a longtime flash user getting up to speed with gsap. I will update my code and see what happens. If I still get the error I'll try to put together a codepen if I can do so without revealing too much of the project so my client doesn't get upset with me. The funny thing is the animation is perfect but the error keeps popping up in the console but doesnt seem to be disrupting anything.

[Carl]

Great. We don't need to see any images or the real text. Solid colored divs are fine.