PSMJonas Posted March 16, 2022 Share Posted March 16, 2022 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? 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 16, 2022 Share Posted March 16, 2022 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. 3 Link to comment Share on other sites More sharing options...
Carl Posted March 16, 2022 Share Posted March 16, 2022 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. 6 Link to comment Share on other sites More sharing options...
PSMJonas Posted March 16, 2022 Author Share Posted March 16, 2022 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 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 16, 2022 Share Posted March 16, 2022 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. 5 Link to comment Share on other sites More sharing options...
PSMJonas Posted March 16, 2022 Author Share Posted March 16, 2022 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 More sharing options...
Solution mvaneijgen Posted March 16, 2022 Solution Share Posted March 16, 2022 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 2 Link to comment Share on other sites More sharing options...
PSMJonas Posted March 16, 2022 Author Share Posted March 16, 2022 Ah, thanks for the approach. I have solved the whole thing via an associative array, I think it also works: See the Pen vYpNyBp?editors=1111 by jonasloerken (@jonasloerken) on CodePen Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now