Skill · Version 1.0.0

Webanimationen umsetzen

Wählt eine passende einfache Animationstechnik und berücksichtigt Unterbrechungen, Layoutänderungen und Ressourcenfreigabe.

web-animation-implementation

Teammitglieder mit diesem Skill

AgentPixel

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill, wenn Übergänge oder gesteuerte Bewegungen stocken oder einen falschen Endzustand hinterlassen.

Wobei hilft er dir?

Wählt je nach Interaktion CSS, Browser-Animations-APIs oder vorhandene Bibliotheken.
Bewegt Elemente effizient statt das Layout während kontinuierlicher Animation ständig neu zu berechnen.
Berücksichtigt geladene Schriften und Bilder, Größenänderungen und den endgültigen Zustand.

Das könntest du fragen

Animiere Karten beim Wechsel zwischen Spalten. Das Ziellayout soll nach Unterbrechungen stimmen und Positionen bei geänderter Fenstergröße oder Schrift neu berechnet werden. Verschiebe eine Karte zweimal bei Schriftladen und Fensteränderung. Endspalte, Trefferfläche und Tastaturfokus entsprechen der gespeicherten Position.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

Web Animation Implementation

Choose the lightest tool that cleanly solves the interaction's state, interruption, and coordination requirements, and always adapt to the animation primitives already installed in the project.

Selecting the Right Animation Primitive

Requirement	Preferred Tool	Why
Simple 2-state UI feedback (hover, focus, open/closed class, accordion height via `grid-template-rows: 0fr -> 1fr`)	CSS Transitions	Zero JS bundle cost, automatic mid-flight reversal from current value, compositor-friendly
Self-contained cyclical or multi-step effect (pulse, shimmer, spinner, CSS `@starting-style` entry)	CSS `@keyframes`	Declarative, runs off main thread when animating `transform`/`opacity`
Programmatic control (`play`, `pause`, `reverse`, `finish` Promise, dynamic target coordinates, FLIP) without adding dependencies	Web Animations API (`element.animate`)	Native browser API, Promise-based lifecycle (`animation.finished`), `commitStyles()` support
DOM state / route morphology across container changes	View Transitions API (`document.startViewTransition`) with progressive fallback	Seamless shared-element morphing with minimal layout thrashing
Multi-element choreographed timelines, scroll-scrubbed scenes, complex SVG morph/draw	Project Timeline Library (e.g., GSAP / Motion)	Precise scrubbing, relative time labels, normalized cross-browser transforms

Compositor-Safe Properties & FLIP Technique

Stick to compositor properties (transform, opacity, filter, clip-path):
- Never animate top, left, width, height, margin, or padding frame-by-frame in continuous loops.
- For height/width reveals where overflow: hidden is acceptable, use CSS Grid (grid-template-rows: 0fr $\rightarrow$ 1fr on wrapper with min-height: 0 child) or the FLIP pattern:
  - First: Measure initial getBoundingClientRect().
  - Last: Apply the DOM/class change and measure final getBoundingClientRect().
  - Invert: Apply transform: translate(dx, dy) scale(dw, dh) so the element visually appears in its First position.
  - Play: Animate transform back to none (translate(0, 0) scale(1, 1)), correcting child scale distortions if needed.
WAAPI (element.animate) Pitfalls:
- Avoid fill: 'forwards' when possible because retained fill animations override subsequent CSS rules and consume memory until cancelled; instead, update the underlying inline style or class on completion (await anim.finished; anim.commitStyles(); anim.cancel();).
Font, Image & Resize Stability:
- Wait for document.fonts.ready and image dimensions (width/height attributes or decode()) before measuring text splits or scroll/layout coordinates.
- Recompute cached geometry inside a debounced ResizeObserver rather than binding unthrottled window.onresize handlers.

Enthaltene Dateien 1

SKILL.md