animejs-v4_skill

Overview

This skill provides Anime.js 4.0 animations tailored for Web Components, with patterns for drag-drop, click feedback, swaps, cancelable motion, and lifecycle-safe cleanup. It focuses on combining declarative animate() calls, spring easings, and a simple Animation Manager to avoid leaks and conflicting animations. Use it to add polished motion and interaction to custom elements in vanilla JavaScript projects.

How this skill works

The skill exposes examples and patterns that use animate(), createTimeline(), createSpring(), and createDraggable() to build animations. It recommends cancelling or reverting existing animations (WeakMap-based manager) before starting new ones and cleaning up in disconnectedCallback to remove inline styles. It also shows FLIP swaps, direct transform updates for pointer tracking, draggable helpers, spring presets, and scroll-, SVG- and text-driven animations.

When to use it

• When adding lift, drop, and slot-hover feedback to draggable cards or list items.
• When you need cancelable animations tied to a Web Component lifecycle.
• When implementing FLIP-style swaps or animated DOM reorders.
• When you want responsive click/tap feedback with spring easings.
• When animating SVG paths, morphs, or text split into characters.

Best practices

• Always cancel or revert previous animations for an element to prevent conflicts and memory leaks.
• Use direct style.transform updates for pointer-following during drag for 60fps smoothness; reserve animate() for release/settle animations.
• Track animations with a WeakMap or per-instance field so disconnectedCallback can clean up inline styles.
• Prefer createSpring presets for consistent tactile motion across interactions.
• Use Promise/await or onComplete callbacks to sequence swap/FLIP animations reliably.

Example use cases

• A draggable spell card that scales and casts a shadow on lift, tracks the pointer directly, then settles with a spring on release.
• Swapping two creature tiles with a FLIP animation so positions animate from old to new bounding boxes.
• Slot hover feedback that scales and tints drop targets as a card is dragged over them.
• Click feedback on UI buttons or cards using bounce or shake animations for success and disabled states.
• Animating SVG spell shapes drawing and morphing as part of a storytelling sequence.