║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Triggers description: Control how and when the icon animates.

animate

This sets the animate state.

<ArrowRight animate />

// or with AnimateIcon
<AnimateIcon animate>
  <ArrowRight />
</AnimateIcon>

animateOnHover

This sets the state to animate on hover.

<ArrowRight animateOnHover />

// or with AnimateIcon
<AnimateIcon animateOnHover>
  <ArrowRight />
</AnimateIcon>

animateOnTap

This sets the state to animate on tap.

<Callout type="info"> **Note:** The state will return to its initial state when the click is released. To ensure that the animation always ends, add the `completeOnStop` prop. </Callout>

<ArrowRight animateOnTap />

// or with AnimateIcon
<AnimateIcon animateOnTap>
  <ArrowRight />
</AnimateIcon>

animateOnView

This sets the animate state when the icon is in view.

<ArrowRight animateOnView />

// or with AnimateIcon
<AnimateIcon animateOnView>
  <ArrowRight />
</AnimateIcon>

animateOnViewMargin

This sets the margin of the in view area.

<ArrowRight animateOnView animateOnViewMargin="10px" />

// or with AnimateIcon
<AnimateIcon animateOnView animateOnViewMargin="10px">
  <ArrowRight />
</AnimateIcon>

animateOnViewOnce

This sets the icon to animate only once when it is in view (by default it is true).

<ArrowRight animateOnView animateOnViewOnce={false} />

// or with AnimateIcon
<AnimateIcon animateOnView animateOnViewOnce={false}>
  <ArrowRight />
</AnimateIcon>

API Reference

<TypeTable type={{ animate: { description: 'Whether to animate the icon. You can also specify the animation to use.', type: 'boolean | string', required: false, default: 'false', }, animateOnHover: { description: 'Whether to animate the icon on hover. You can also specify the animation to use.', type: 'boolean | string', required: false, default: 'false', }, animateOnTap: { description: 'Whether to animate the icon on tap. You can also specify the animation to use.', type: 'boolean | string', required: false, default: 'false', }, animateOnView: { description: 'Whether to animate the icon on view. You can also specify the animation to use.', type: 'boolean | string', required: false, default: 'false', }, animateOnViewMargin: { description: 'The margin of the in view area.', type: 'string', required: false, default: '0px', }, animateOnViewOnce: { description: 'Whether the icon should only animate once.', type: 'boolean', required: false, default: 'true', }, }} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║