Jump to content
GreenSock

jesper.landberg last won the day on January 6 2019

jesper.landberg had the most liked content!

jesper.landberg

ShockinglyGreen
  • Posts

    127
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by jesper.landberg

  1. 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

×