Orqestria Download
← Back to Website builders

Skill · Version 1.0.0

Implement web animations

Chooses and builds the simplest suitable animation technique while handling interruptions, layout changes and resource cleanup.

web-animation-implementation

Team members using this skill

See how it helps

When is it useful?

Use when an interaction needs smooth transitions or controlled motion that the project’s current implementation does not handle reliably.

What does it help you do?

  • Selects CSS, browser animation APIs or an existing library according to the interaction.
  • Moves elements efficiently instead of repeatedly recalculating layout during continuous animation.
  • Accounts for font and image loading, resizing and the final state after an animation finishes.

Try asking this

Animate cards moving between columns. Keep the destination layout correct after interruption and recalculate positions when the viewport or loaded fonts change. Move a card twice while fonts finish loading and the window resizes. Its final column, hit area and keyboard focus should match the persisted position.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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

  1. 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.
  2. 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();).
  3. 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.

Included files 1

  • SKILL.md