Search the Community

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!