Animation

Animate your Ark UI Components with CSS keyframes or your favorite JavaScript animation library.

Adding animation to Ark UI Components is as straightforward as with any other component, but keep in mind some considerations when working with exit animations with JavaScript animation libraries.

Animating with CSS

The most straightforward method to animate your elements is using CSS. You can animate both the mounting and unmounting phases with CSS. The latter is achievable because Ark UI Components postpones the unmounting while your animation runs.

Below is a simple example of creating a fade-in and fade-out animation using CSS keyframes:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

You can use these keyframes to animate any element during its lifecycle. For instance, to apply the fadeIn animation when your Tooltip enters the 'open' state, and fadeOut when it enters the 'closed' state, you could use the following styles:

[data-scope='tooltip'][data-part='content'][data-state='open'] {
  animation: fadeIn 300ms ease-out;
}

[data-scope='tooltip'][data-part='content'][data-state='closed'] {
  animation: fadeOut 300ms ease-in;
}

Animating with JS Libraries

There's plenty of versatility when it comes to animating your Ark UI Elements with JavaScript libraries. Various libraries such as GreenSock, anime.js, Framer Motion, and more can add a new level of interaction and feedback to your UI components.

One significant advantage of using Ark UI Elements is the control you have over the unmounting phase of your components. This is primarily facilitated through the present prop. The present prop allows the component to stay mounted even after its enclosing condition has been falsified, allowing for exit animations to complete before the component is removed from the DOM.