dbt-doctor: Skill for Claude Code

Practical Animation Tips

Detailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.

Recording & Debugging

Record Your Animations

When something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.

Fix Shaky Animations

Elements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.

Fix:

.element {
  will-change: transform;
}

This tells the browser to keep the element on the GPU throughout the animation.

Take Breaks

Don't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.

Button & Click Feedback

Scale Buttons on Press

Make interfaces feel responsive by adding subtle scale feedback:

button:active {
  transform: scale(0.97);
}

This gives instant visual feedback that the interface is listening.

Don't Animate from scale(0)

Starting from scale(0) makes elements appear from nowhere—it feels unnatural.

Bad:

.element {
  transform: scale(0);
}
.element.visible {
  transform: scale(1);
}

Good:

.element {
  transform: scale(0.95);
  opacity: 0;
}
.element.visible {
  transform: scale(1);
  opacity: 1;
}

Elements should always have some visible shape, like a deflated balloon.

Tooltips & Popovers

Skip Animation on Subsequent Tooltips

First tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.

.tooltip {
  transition:
    transform 125ms ease-out,
    opacity 125ms ease-out;
  transform-origin: var(--transform-origin);
}

.tooltip[data-starting-style],
.tooltip[data-ending-style] {
  opacity: 0;
  transform: scale(0.97);
}

/* Skip animation for subsequent tooltips */
.tooltip[data-instant] {
  transition-duration: 0ms;
}

Radix UI and Base UI support this pattern with data-instant attribute.