kleeman

I actually have one more question on this. If you look closely you'll see when the car starts to move it's as if the image gets sharper like there's a subpixel rendering issue - does anyone know what is causing that? here's the codepen: http://codepen.io/mfro/pen/QNEobQ

Thank you Diaco! This is exactly what I needed.

Hello, I'm animating a spritesheet which works fine except I'm getting quick flicker when the animation starts. I've set up a codepen for review. Any ideas would be helpful - thanks!

perfect! Thank you both! exactly what I needed.

I have a timelineMax that calls a pause function on another timeline. Right now the function is called and the timeline (a looping sprite sheet) stops immediately. Because this second timeline is a looping sprite animation, I'd like to have it ease to a stop instead of just stopping. Is this possible? Here's some sample code: //THIS IS THE LOOPING SPRITE ANIMATION var TL = new TimelineMax({repeat: -1, repeatDelay:-1}); TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)}); TL.set("#car", {backgroundPosition:"0 0"}); TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)}); //THIS IS THE MAIN TIMELINE tl2 .to("#car", 2, { scale:.5, x:"115", y:"-10", ease:Power3.easeOut},"-=.75") .addCallback(stopWheels, 10, {ease:Power3.easeOut}) function stopWheels() { TL.pause(); // ** WOULD LIKE THIS TO EASE OUT TO A STOP } Thanks!

Hello Im working on an expandable HTML5 banner using gsap. I'm running into an issue when I collapse the banner and expand it (After the initial expansion) and a few of the tweens don't play in the correct sequence second time around. I'm using timelinelite. So for example, when I collapse the banner and then expand it again, the animation should restart from the beginning. It does for the most part but there are 1 or 2 tweens that sometimes start in the wrong place or don't start at all. It seems to be the ones where I am using a tl.from instead of tl.to. Or perhaps the ones that have a scale property. I've tried to create a codepen for this but I can't get it to work correctly for some reason. I'm using a lot of script files from Sizmek/mediamind so I suspect there's something missing in the codepen that's causing issues. Here is the pen: http://codepen.io/mfro/pen/gpjwMY, but I can't get the expand to work so it's not very useful. I know it's annoying to paste code in here but here's a snippet that shows the basic functions for the timeline. This almost works except for the issues mentioned above. function expand() { EB.expand(); adDiv.classList.remove("collapsed"); adDiv.classList.add("expanded"); startAnimation(); } function collapse() { adDiv.classList.remove("expanded"); adDiv.classList.add("collapsed"); EB.collapse(); tl.clear(); } function clickthrough() { EB.clickthrough(); } function userActionCounter() { EB.userActionCounter("CustomInteraction"); } 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"); 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 mySplitText3 = new SplitText("#txt3", {type:"words,chars"}), chars3 = mySplitText3.chars; //an array of all the divs that wrap each character tl.timeScale(1.3); tl.from(bottle, 1, { x: "350", ease: Circ.easeOut }) .add("typestart") .from(cup, 1, {x: "-250", ease: Quad.easeOut }, "-=1") .from(smoke, 7, { alpha: 0, scaleY:.2, ease: Quad.easeOut }, "typestart") .to(smoke, 10, { alpha: 0, scaleY:7, scaleX:7, ease: Quad.easeIn },"typestart+=8") .staggerFrom(chars, 2, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2, "typestart") .staggerTo(chars, 4, {className:"+=txtin"}, 0.17, "typestart+=2") /* first text out */ .staggerTo(chars, 2, {className:"+=txtout"}, 0.08, "typestart+=9") .staggerTo(chars, 3, {opacity:0, scale:.8, ease:Circ.easeIn}, 0.02, "typestart+=10") /* second text in */ .staggerFrom(chars2, 2, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2, "typestart+=10") .staggerTo(chars2, 5, {className:"+=txtin"}, 0.17, "typestart+=11") .staggerFrom(chars3, 2, {opacity:0, scale:0, ease:Circ.easeOut}, 0.2, "typestart+=12") .staggerTo(chars3, 5, {className:"+=txtin"}, 0.17, "typestart+=13") .from(glow, 1.5, { alpha: 0, ease: Quad.easeOut }, "-=5") .from(cta, 2, { alpha: 0, ease: Quad.easeInOut }, "typestart+=15"); } var tl = new TimelineLite; Any help would be great! thank you!

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.

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!

Hello! I'm having an issue when my .swf first loads you can see the movieclips on the stage for a split-second before the tweens start. I think it happens primarily using FROM tweens like TweenLite.from. So if I'm tweening from alpha:0 it takes a second before the script initializes and the alpha is set to 0. moving all the movieclips to frame 2 instead of frame 1 seems to help. Also, strangely, it only seems to happen in certain browsers, chrome specifically. Perhaps its an issue with the html embed code if noone else if familiar with this problem. thank you!