mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 16:35:44 +01:00
Kaj Kowalski
cd05fc8648
- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills) - Change typescript to tsx for code blocks with JSX - Replace ellipsis (...) in array examples with valid syntax - Separate CSS from TypeScript into distinct code blocks - Convert JavaScript object examples to valid JSON in docs - Fix enum definitions with proper comma separation
39 lines
1.1 KiB
Markdown
39 lines
1.1 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.
|