fix(seer): Smooth summary anmiation, no initial animation

[jasonyuezhang]

uses framer motion to disable animation when the drawer is opening and remove chunky-ness when collapsing

before

CleanShot.2025-10-03.at.14.32.09.mp4

after

CleanShot.2025-10-03.at.14.32.53.mp4

---

Copied from getsentry#100924
Original PR: getsentry#100924

[propel-test-bot]

Improve Group Summary Animation Using Framer Motion

This pull request refines the expand/collapse animation for the GroupSummary component in static/app/components/group/groupSummary.tsx. By integrating framer-motion and replacing the previous CSS transition logic, the PR smooths the UI animation, disables the animation on initial drawer open, and removes the 'chunky' effect when collapsing. Design intent is to enhance responsiveness and polish of the summary drawer transitions.

Key Changes

• Replaced previous CSS max-height transition for ExpandableContent with a motion.div powered by framer-motion.
• Added new imports: motion from framer-motion, testableTransition, Flex from sentry/components/core/layout, and React's useLayoutEffect.
• Updated the expand/collapse logic: ExpandableContent now uses controlled height animation and disables initial animation using initial={false}.
• Disabled animation on mount (when drawer opens), matching intended UX.
• Transition config (spring with custom damping, stiffness, bounce) now provided via testableTransition.
• Refactored layout: introduced Flex container to manage content padding when expanded.
• Removed the CSS-based ExpandableContent and its isExpanded prop in favor of motion-driven props.

Affected Areas

• static/app/components/group/groupSummary.tsx
• ExpandableContent styling and behavior
• UI interaction for group summary expand/collapse

This summary was automatically generated by @propel-code-bot

[propel-test-bot]

[PerformanceOptimization]

The spring animation configuration has very high stiffness (600) and damping (50) which could cause performance issues on slower devices, especially when multiple drawers are animated simultaneously. The high stiffness combined with bounce: 0 might also create jarring motion.

Consider more moderate values for better performance and smoother feel:

Suggested Change

Suggested change

	transition={testableTransition({
	type: 'spring',
	damping: 50,
	stiffness: 600,
	bounce: 0,
	visualDuration: 0.4,
	})}
	transition={testableTransition({
	type: 'spring',
	damping: 25,
	stiffness: 300,
	bounce: 0,
	visualDuration: 0.3,
	})}

⚡ Committable suggestion

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Context for Agents

[**PerformanceOptimization**]

The spring animation configuration has very high stiffness (600) and damping (50) which could cause performance issues on slower devices, especially when multiple drawers are animated simultaneously. The high stiffness combined with `bounce: 0` might also create jarring motion.

Consider more moderate values for better performance and smoother feel:

<details>
<summary>Suggested Change</summary>

```suggestion
            transition={testableTransition({
              type: 'spring',
              damping: 25,
              stiffness: 300,
              bounce: 0,
              visualDuration: 0.3,
            })}
```

⚡ **Committable suggestion**

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

</details>

File: static/app/components/group/groupSummary.tsx
Line: 301