Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jesper.landberg

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×