Resetting tweens to starting point

[kleeman]

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: 

See the Pen gpjwMY by mfro (@mfro) on CodePen

, 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!

[Diaco]

Hi kleeman 

 

pls provide Reduced Demo as possible and check console error in your codepen demo .

 

try define your Timeline tweens out of startAnimation function , set tl to paused:true and just restart your timeline 

 

like this :

var tl = new TimelineLite({paused:true})
// define timeline tweens .....

function expand() {
    EB.expand();
    adDiv.classList.remove("collapsed");
    adDiv.classList.add("expanded");
    tl.restart(); // instead of startAnimation() 
}

[Carl]

I'm really struggling to understand the problem. I think the first step should be trying to replicate a similar situation without any other Sizmek or 3rd party scripts. 

If you have an idea of which tweens are the problem, only include those in your demo. We don't need to see the parts of the animation that do work.

 

I wish we could be of more help, but its just very difficult without a demo.