Jump to content
GreenSock

PSMJonas

Play animation again after reverse

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

Have you tried using .restart() instead of .play()?

 

Would be nice if you linked a codepen, than you get better feedback, because we can edit your work and show you a working example.

  • Like 3
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

Hey guys,

 

thanks for the response!

 

Sorry, I totally forgot about the CodePen demo. Here is the link: 

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

  • Like 1
Link to comment
Share on other sites

yep it was as @Carl suggested. You created a new timeline on each click. 

 

See the Pen JjMYbyy by mvaneijgen (@mvaneijgen) on CodePen

 

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.

  • Like 5
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.
×