Persistence

persistOnAnimateEnd

This allows the animation to remain in the animate state without returning to the initial state. This will have no impact in loop or when the animation ends in the same state as the initial state.

<ArrowRight persistOnAnimateEnd />

// or with AnimateIcon
<AnimateIcon persistOnAnimateEnd>
  <ArrowRight />
</AnimateIcon>

initialOnAnimateEnd

This allows you to set the initial state without transition at the end of the animation. Very useful for rotation animations, for example, which give the impression of returning to the initial state even though they have the rotation applied.

<ArrowRight initialOnAnimateEnd />

// or with AnimateIcon
<AnimateIcon initialOnAnimateEnd>
  <ArrowRight />
</AnimateIcon>

completeOnStop

This allows the current animation to finish before returning to the initial state.

<ArrowRight completeOnStop />

// or with AnimateIcon
<AnimateIcon completeOnStop>
  <ArrowRight />
</AnimateIcon>

API Reference