d9bcdc4a8d
Skills included: - pr-reviewer: Adapted for Gitea/GitHub via platform-aware scripts (dropped fetch_pr_data.py and add_inline_comment.py, kept generate_review_files.py) - code-review-excellence: Methodology and checklists (React, TS, Python, etc.) - vercel-react-best-practices: 57 rules for React/Next.js performance - tailwind-design-system: Tailwind CSS v4 patterns, CVA, design tokens New shell scripts added to ~/.claude/scripts/git/: - pr-diff.sh: Get PR diff (GitHub gh / Gitea API) - pr-metadata.sh: Get PR metadata as normalized JSON Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
48 lines
1.2 KiB
Markdown
48 lines
1.2 KiB
Markdown
---
|
|
title: Animate SVG Wrapper Instead of SVG Element
|
|
impact: LOW
|
|
impactDescription: enables hardware acceleration
|
|
tags: rendering, svg, css, animation, performance
|
|
---
|
|
|
|
## Animate SVG Wrapper Instead of SVG Element
|
|
|
|
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
|
|
|
|
**Incorrect (animating SVG directly - no hardware acceleration):**
|
|
|
|
```tsx
|
|
function LoadingSpinner() {
|
|
return (
|
|
<svg
|
|
className="animate-spin"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" />
|
|
</svg>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (animating wrapper div - hardware accelerated):**
|
|
|
|
```tsx
|
|
function LoadingSpinner() {
|
|
return (
|
|
<div className="animate-spin">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" />
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
|