Do i need to reset timeline? reverse() is triggered.

[jesper.landberg 61 Likes (Contributor)]

Hi,

 

So I have this code:

 

    var toggleInfo = function(){

     var info = new TimelineLite();

     $('.info-open').click(function(e){

     e.preventDefault();

     info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false});

     info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false});

     info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"});

     info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1);

     info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1);

     info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"});

     });

     $('.info-close').click(function(e){

     e.preventDefault();

     info.reverse().timeScale(2);

     });

    }

And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.

See the Pen MwxwJa by ReGGae (@ReGGae) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

With the way you've currently structured it, the timeline is recreated everytime you click. What you want to do is create the timeline and its tweens once and simply control the playback with the click events.

 

See the Pen MwxwGe?editors=001 by sgorneau (@sgorneau) on CodePen

[jesper.landberg 61 Likes (Contributor)]

With the way you've currently structured it, the timeline is recreated everytime you click. What you want to do is create the timeline and its tweens once and simply control the playback with the click events.

 

See the Pen MwxwGe?editors=001 by sgorneau (@sgorneau) on CodePen

Cool, thanks a lot!