Popover animations now origin-aware

Popovers now animate from the direction they appear, feel more natural, and stay flush to trigger elements by default.
Popovers in the design system now animate in a way that feels intuitive. Previously, when a popover appeared above a trigger, it would animate upward—toward the trigger element—which users perceived as the animation coming from the wrong direction. Now the animation originates from the popover's attachment point and flows outward toward its final position, with a subtle scale effect that makes the motion feel grounded and intentional.
The component also ships with saner defaults: the align property now defaults to 'start', keeping popovers flush against their trigger element rather than centered. The sideOffset was reduced from 5 to 4 pixels for a tighter appearance. Animation timing now uses design tokens instead of hardcoded values, ensuring consistency with other components in the system.
These changes live in the @n8n/design-system package and affect any UI element that relies on popovers—dropdowns, tooltips, and contextual menus throughout the application.
View Original GitHub Description
Summary
- Change intro animation so animations are 'origin-aware'. So if you pin the popover to the bottom-left of the trigger element it will animate from there. Previously we animated towards the element which felt unnatural.
- Added 'align: start' as default prop so Popover stays flush to trigger element
- Updated animation duration values to use design tokens
- Add Storybook controls and dedicated side/alignment stories to make placement and animation behaviour easier to verify visually.
| Before | After |
|---|---|
| <img src="https://github.com/user-attachments/assets/1b36fbc8-eb7e-427b-8fa4-f11a217bcb18" width="360px" /> | <img src="https://github.com/user-attachments/assets/d82e3111-4ea9-4d60-b3ef-aa04349c69df" width="360px" /> |
Related Linear tickets, Github issues, and Community forum posts
Review / Merge checklist
- PR title and summary are descriptive. (conventions)
- Docs updated or follow-up ticket created.
- Tests included.
- PR Labeled with
release/backport(if the PR is an urgent fix that needs to be backported)