Animation

BlakeUI Pro components follow the exact same animation patterns as BlakeUI OSS — built-in CSS transitions via data attributes, custom CSS animations, and JavaScript libraries like Motion (prev. Framer Motion) all work the same way.

Pro components use the same data attributes for animation states:

/* Works on both OSS and Pro components */
.sheet__content[data-entering] {
  animation: slide-up 200ms ease-out;
}

.sidebar__overlay[data-exiting] {
  animation: fade-out 150ms ease-in;
}

See each component's documentation for the specific data attributes and CSS classes available for animation.