Jump to content
Search Community

Play animation again after reverse

PSMJonas test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

I use GSAP (Timeline) to show and hide an overlay. The overlay can be opened and closed without any problems. But when I want to open it again, it does not work.

 

function animate_media(overlay, reversed) {
    var media_tl = gsap.timeline({repeat: 0, paused: true});
    media_tl.from(overlay, {duration: 0.5, y: 30, autoAlpha: 0});

    if(reversed) {
        media_tl.reverse(0);
    } else {
        media_tl.play();
    }
}

I pass the element and a boolean value to the function (depending on whether the overlay should open or close).

 

I noticed that the overlay keeps the following inline code after closing: opacity: 0; visibility: hidden; transform: translate(0px, 30px);

 

Is there a possibility to show the overlay again after closing, i.e. to play the animation again?

  • Like 1
Link to comment
Share on other sites

Welcome to the forums!

 

I'd suggest making your timeline outside the function and then toggle it's reversed() state on open and close. 

This Quick Tip which shows how to toggle the paused() state can be altered to use reversed()

 

WIth your setup you are making a new timeline each time and the BIG problem is this from tween

 

media_tl.from(overlay, {duration: 0.5, y: 30, autoAlpha: 0});

 

If you already closed the animation and the autoAlpha gets set to 0 the next time you animate FROM autoAlpha:0 nothing will happen as it is already 0. In other words, animating something from 0 to 0 won't allow for any change in value.

 

But as @mvaneijgen suggested, a minimal demo would make it much easier for us to provide a clear solution.

 

  • Like 6
Link to comment
Share on other sites

Thank you very much for your answer. The problem is that the overlay is dynamic. I have updated the CodePen link again:

 

See the Pen vYpNyBp by jonasloerken (@jonasloerken) on CodePen

 

This leads to the fact that I can not create the timeline outside of a function, right? Otherwise I can't open or close the right overlay with the play() and reversed() functions.

Link to comment
Share on other sites

  • Solution

I figured. That's why I said

 

Quote

If you have multiple overlays you want to trigger this way I would suggest creating a .forEach() loop and create the timeline in there for each overlay.

 

 

 I'm not well versed in jQuery, so I've just used normal Javascript, with some of your jQuery still there.

See the Pen bGaVgrw?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Above version still had a bug where it would close modal-2, so I've updated the button class to reflect which modal should close 

See the Pen xxpwgPQ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
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.
×
×
  • Create New...