Animation

Using animation

Use the premade sparkle animation to add interest to AI indicators, including icons and chatbot avatars.

  • Animations should start on rollover, hover, or click and loop once before returning to the inactive state.
  • For clarity, be sure that the AI sparkle is visible when the animation is at rest.
  • Don't create new animations.

To request a new animation, reach out in #help-brand on Slack.

Animation do's and don'ts

  • Make sure that the AI sparkle is visible at the beginning and end of the animation loop, including when the animation is at rest.
  • Keep the animation within the same bounding box as the static icon so padding doesn't need to be adjusted.
  • Don't allow animations to play before the user interacts with them, or allow animations to loop endlessly.
  • Don't use animations that are exaggerated or over-the-top.