Trigger animation when playState changes from "paused" to "running" - stacked component

[Davood]

I want to trigger a ZoomOutDown to a component when a button fires. When I change the playState from "paused" to "running", nothing happens. Can you help how to do this?

` 

  <Animate
    duration="1s"
    iterationCount={100}
    playState={animateState}
    delay="1s"
    Animation={[ZoomOutDown]}
  >
  <button
    onClick={(e) => {
      e.preventDefault();
      setAnimateState("running");
    }}
  >
    Click
  </button>
 </Animate>

`

[Diel Duarte]

@d-fal sorry for the big delay on it.

in order to do that, you should only render the Animate component if the state is equal running in a declarative way, for now, there is no playState prop, although this is a valid idea to implement. will definitely add it to the backlog.

[Diel Duarte]

Hey @d-fal, Just got exactly what is happening!

We have a bug to control animation props when using stacked animations, on your example, you are passing the animation like: Animation={[ZoomOutDown]} try this way: Animation={ZoomOutDown}, not setting it as an array will only render the animation component instead of the stack animation component and the switch between paused or running will work as expected.

[Davood]

@dielduarte, thanks for following this up. I would try this and report it back. Btw, it made me go deeper in reactjs animation and transition group. I would try to contribute to this project if I could.