Search the Community

I'm making a call to animate a wedge in my chart from one position to another like so: TweenMax.to("#wedgePath_" + id, 1, { morphSVG: data[j].Value[1] }); This for every other wedge in my chart except one, where the wedge doesn't animate and instead just infinitely repeats an error (I'll screen shot the detail and attach it). The "wedgePath" + id matches the id of the wedge in chart. The original path is "M229.8083 276.5665 A185 185 0 0 1 268.2768 233.1447 L220.6919 132.8616 A185 185 0 0 0 124.5208 241.4164 Z" and data[j].Value[1] is "M374 300 A185 185 0 0 1 374 300 L485 300 A185 185 0 1 0 485 300 Z". If I comment out that one call to TweenMax.to the wedge animation doesn't work, but I also don't get any errors. If I comment out that one line, the wedge animation doesn't work, but I also don't get any errors.

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!

Hi there, using the below code to run some animations on click: a.on('click', function() { var selector = $(this).attr('data-filter'); that.isotope('once', 'layoutComplete', function(x, y) { var iso_in = _.pluck(y, 'element'), iso_out = _.difference(_.pluck(x.items, 'element'), iso_in), iso_ani = new TimelineMax({ onComplete: tl.timeScale(1.6).reverse() }); TweenLite.set(iso_in, { opacity: 0, y: 100 }); iso_ani .staggerTo(iso_out, (0.1 * iso_out.length), { y: 100, autoAlpha: 0, ease: Quart.easeOut }, 0.1) .staggerTo(iso_in, (0.25 * iso_in.length), { y: 0, autoAlpha: 1, ease: Quart.easeOut }, 0.25); }); that.isotope({ filter: selector }); return false; }); Everything is working, but couldn't find where it is triggered. Could it because sometimes the elements are empty? If so, how can I prevent that?