Correct Transform-Origin for Modals: Center Positioning in CSS

The correct transform-origin for modals is center because they appear centered in the viewport rather than anchored to a specific trigger element.

In the emilkowalski/skills repository, animation standards establish strict rules for how UI components should scale and transform. When implementing modal dialogs, developers must use a specific transform-origin value that differs from trigger-anchored elements like popovers and dropdowns.

Why Modals Use transform-origin: center

Unlike popovers or tooltips that animate from their trigger points, modals are exempt from trigger-based positioning. According to skills/review-animations/STANDARDS.md at line 58, "Modals are exempt — they appear centered in the viewport, keep transform-origin: center."

This exemption exists because modals overlay the entire viewport without reference to a specific activation button or element. The center value ensures scaling animations originate from the geometric center of the modal, creating a natural zoom effect that draws attention to the dialog's content.

The same standard is reiterated in skills/review-animations/SKILL.md at line 52, which explicitly states that "transform-origin: center on a modal is correct" and marks any deviation as a finding.

Implementation Examples

Basic Modal CSS

When styling a modal component, explicitly set the transform origin to center to ensure proper animation behavior:

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 80%;
  max-width: 540px;
  background: white;
  border-radius: 8px;
  /* Correct origin for viewport-centered elements */
  transform-origin: center;
  animation: modalEnter 250ms ease-out forwards;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Contrast with Anchored Components

Trigger-anchored components must use the CSS custom property var(--transform-origin) to animate from their trigger point:

/* Incorrect for modals - only for popovers/dropdowns */
.popover {
  transform-origin: var(--transform-origin);
  animation: popIn 200ms ease-out forwards;
}

Using var(--transform-origin) on a modal would constitute an error according to the Skills documentation.

Source Documentation

The animation standards in the emilkowalski/skills repository provide authoritative guidance across three key files:

• skills/review-animations/STANDARDS.md (line 58): Defines the global exemption for modals, mandating center as the only valid transform origin.

• skills/review-animations/SKILL.md (line 52): Contains the review checklist confirming that transform-origin: center is the correct implementation for modal animations.

• skills/emil-design-eng/SKILL.md (lines 236-241): Restates the modal exception within the design engineering guidelines, reinforcing that viewport-centered elements require center-based transformation origins.

These files collectively establish that modals must not use trigger-based origins under any circumstances.

Summary

• Modals require transform-origin: center because they are viewport-centered, not trigger-anchored.
• Trigger-based components like popovers and dropdowns use var(--transform-origin) instead.
• The emilkowalski/skills repository explicitly exempts modals from standard anchoring rules in STANDARDS.md and SKILL.md.
• Using any origin other than center for modals constitutes an animation standards violation.

Frequently Asked Questions

What is the correct transform-origin for modals?

The correct transform-origin for modals is center. This value ensures scaling animations originate from the middle of the modal element, which is appropriate since modals appear centered in the viewport without reference to a trigger element.

Why can't modals use var(--transform-origin)?

Modals cannot use var(--transform-origin) because this CSS custom property is reserved for trigger-anchored components like popovers and tooltips. Since modals overlay the entire viewport independently of any trigger button, they require the fixed center value to maintain consistent animation behavior.

Where are the modal transform-origin rules documented?

The rules are documented in three locations within the emilkowalski/skills repository: skills/review-animations/STANDARDS.md at line 58, skills/review-animations/SKILL.md at line 52, and skills/emil-design-eng/SKILL.md at lines 236-241.

What happens if I use the wrong transform-origin on a modal?

Using var(--transform-origin) or any value other than center on a modal constitutes a standards violation or "finding" in code reviews. The animation will technically still function, but it will fail the repository's animation quality standards.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}