Jump to content
Search Community

How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning

alechance test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello there,

 

I'm quite new so this might be a dumb question ;)

I'm trying to animate my rotating images only after 'is-animated' class is contained with 'image-mask'. Once this class is removed, stop the animation. When adding again 'is-animated' start it again from the beginning.

Thank you so much for your help!

See the Pen ZEMqvdE by alechance-the-decoder (@alechance-the-decoder) on CodePen

Link to comment
Share on other sites

Hi @alechance and welcome to the GreenSock forums!

 

First thanks for being a GreenSock Club member and supporting GreenSock! 🥳

 

I assume that there is some method, event handler or user interaction that adds/removes that particular class on the images container. So you should use the same event/method to pause the timeline and then resume it. If that's the case what you could do is add all the instances to a master timeline and pause/play that one based on that input. Something like this:

See the Pen XWPxEpE by GreenSock (@GreenSock) on CodePen

 

I'm not all that familiar with advanced staggers for this particular cases. I'm an old fashioned guy that gets along very well with loops, so I created everything inside a loop. Also I added some code to pause the master timeline only after an animation is completed, so it doesn't look odd.

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

@Rodrigo thank you for getting back to me. What I want to achieve is displaying my animation inside a modal overlay. My animation should play only if my overlay is visible, when closed stop the animation and go back to the beginning of my timeline.

 

Here is my updated codepen  (see code from line 66)

Link to comment
Share on other sites

Hi @alechance the solution @Rodrigo has provided is wha you need. I don't have time to refactor you're whole setup, but you need to create an animation on page load and set that to paused: true and then in your click handler .resume() (or .restart() if you want it to start over on each modal open close) the timeline and .pause() it again on close.

 

Right now you have loops in event triggers with in there more loops with more in event triggers, is a logical nightmare to keep track of.  What I would do is create one forEach loop for a button/modal combo and scope all your logic to that particular combo in the loop. 

 

Here is a working demo with a lot of CSS/JS removed/moved, to get something working, but to get this in a logical correct state it will need a lot of refactoring. Hope it helps and happy tweening! 

 

See the Pen yLxRWXy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Thank you @mvaneijgen and @Rodrigo for your help. I noticed that the scenario from @mvaneijgen does not restart from the beginning after closing the modal then reopening it again. I'm guessing it's because of the use of two different events on click while from @Rodrigo it is done with the same one?

Also, the first animation takes longer than the other ones to change the z-index, any idea why?

 

Also, quick question about another small addition I want to make, is this possible to pause the timeline on hover? Thank you very much for your help!

Link to comment
Share on other sites

Another issue that I have right know: I have multiple triggers with multiple modal overlay, how can I start / pause my timeline only for my selected modal? Here's the scenario:
 

<a data-modal="1">Button modal 1</a> <!-- Click this one -->
<a data-modal="2">Button modal 2</a>

<div id="1"> <!-- Animate only this one -->
  <div class="modal-image">
    <!-- Timeline 1 -->
    <img src>
    <img src>
    <img src>
  </div>
</div>

<div id="2">
  <div class="modal-image">
    <!-- Timeline 2 -->
    <img src>
    <img src>
    <img src>
  </div>
</div>

Thank you again for your help

Link to comment
Share on other sites

Hi,

 

You can create a timeline for each modal with a specific identifier and add a data attribute to the element that opens the modal (also in the element that closes it as well ;)).

 

As for pausing the modal is the same, just add an event handler that pauses that specific timeline and that should be it.

 

You can easily replicate the approach in the last codepen and instead of using masterTl for the main timeline you can give them unique names like modalOneTl, modalTwoTl, etc.

 

Hopefully this helps. If you get stuck remember to include a minimal demo that shows what you have so far.

Happy Tweening!

Link to comment
Share on other sites

Thank you @Rodrigo here's a minimal demo 

See the Pen eYLQMvR by alechance-the-decoder (@alechance-the-decoder) on CodePen

 

I was also considering a timeline for each modal, in my case I could have up to 5 modals...which make it hard to maintain don't you think? Same with hover for pausing my timeline.

 

Another thing from editing your demo, I want to remove Y transform animation by simply using z-index, there's a strange  behaviour happening where the first image always comes back with a conflict in my z-index.

Link to comment
Share on other sites

Why not create everything in the same container and just to a .forEach() loop for each modal + button combo? The modals are position: fixed right when you open them, so they are not part of the flow anyway, so they don't interfere if they are somewhere random on the page. As I suggested in my previous post:

 

On 3/22/2023 at 12:06 PM, mvaneijgen said:

Right now you have loops in event triggers with in there more loops with more in event triggers, is a logical nightmare to keep track of.  What I would do is create one forEach loop for a button/modal combo and scope all your logic to that particular combo in the loop. 

 

Again I don't have time to debug everything right now (the close button is not clickable at the moment, fixed), but this logic is in my eyes the most simple solution. and it will not matter if you have 2 modals or 200 modals, all the javascript is scoped to that particular modal in the loop. 

 

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

Link to comment
Share on other sites

Thank you @mvaneijgen it is indeed the most simple solution compared to mine. However if you look closely at the animation, it looks like your animation starts after 3 secondes...am I correct? This is strange because in your code there is no such request.

 

If I understand correctly there is no way to only start the timeline without specific identifier? If I open modal 1, only timeline within my modal 1 is animated? This is important that the timeline starts from the beginning so the user will see the first image. From your documentation restart() should restart and begin playing from the beginning...which is not the case, am I wrong?

Again, my apologies for asking so many questions. Have a nice day!

Link to comment
Share on other sites

  • Solution

I had one div too many in my setup which made the scope not correct, took me a while to debug, so the pen looks different now. The delay was in the original animation, so I didn't know if that was part of it, I can't really figure out how that works, but it looks like you want a seamless loop right? Check out this amazing tutorial from our own @Carl which has a really smart way of handeling seamless loops. 

 

 

 

See the Pen KKxrbJG?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

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