Anime.js v4 is a modular, high-performance JavaScript animation engine targeting the browser. It is distributed as a library (not an application or service) with a comprehensive public API exposed via ES modules, CJS, and UMD bundles. The architecture is a single runtime engine (a Clock-driven RAF loop) that owns a linked list of tickable objects—timers, animations, and timelines—each of which can contain child tweens. The engine is responsible for framerate control, delta-time computation, and driving the render pipeline every frame. The core data flow is: user calls (e.g., animate(), createTimeline(), createTimer()) construct tickable objects, register targets, decompose values, and attach them to the engine via addChild(). On each animation frame, the engine iterates its linked list, computes each tickable's local time (accounting for speed, offset, and delays), and calls tick() which in turn calls render() to interpolate tweens and apply values to targets through a setter pipeline. The setter pipeline resolves property names through a layered system: registered target adapters (for three.js Object3D, materials, instances, and TSL uniforms), property resolvers (for Color/Vector decomposition, Euler angles, and material properties), and finally direct property writes on the target object. Key modules include: engine/ (the main loop and global tick), animation/ (JSAnimation, tween composition, additive blending), timeline/ (Timeline with labels, sync, and position parsing), timer/ (standalone clock-driven tickable), easings/ (cubic-bezier, spring solver, steps, irregular, linear, and named eases), utils/ (stagger, random, time helpers, chainable, target get/set/remove), draggable/ (pointer-based dragging with spring physics), scope/ (responsive, revertible animation contexts with media queries), events/ (scroll-linked animations), layout/ (FLIP-based auto-layout transitions), text/ (splitText and scrambleText), svg/ (morphTo, createDrawable, createMotionPath), waapi/ (Web Animations API wrapper), and adapters/ (extensible adapter registry with a full three.js integration). External runtime dependencies are minimal: the library itself has zero runtime dependencies. The three.js adapter is an optional peer dependency. Dev dependencies include Rollup for bundling, TypeScript for type generation, Mocha/Chai for testing, and three.js for the adapter tests. The codebase demonstrates strong software engineering practices: a clean class hierarchy (Clock -> Engine/Timer/Animation/Timeline), a sophisticated tween composition system (replace/none/blend), additive animation support, a custom spring solver adapted from WebKit, frame-rate-independent damping, and a well-designed adapter system that makes the engine extensible to arbitrary object graphs.
react-draggable is a mature, well-maintained React library that provides two components for making elements draggable: `<Draggable>` (a high-level, state-managed component that applies CSS transforms) and `<DraggableCore>` (a low-level, stateless primitive that fires raw drag events). The library handles mouse and touch events, supports axis constraints, bounds (parent, selector, or numeric), grid snapping, scaling, and controlled/uncontrolled position modes. It uses CSS transforms for positioning, avoiding conflicts with CSS layout. The codebase was recently migrated from Flow to TypeScript (v4.6.0), ships CommonJS, ESM, and UMD builds, and includes a comprehensive test suite (unit tests in jsdom + browser tests via Puppeteer). The architecture is clean: `Draggable` wraps `DraggableCore`, adding state management and transform application, while utility modules (`domFns`, `positionFns`, `getPrefix`, `shims`) handle DOM operations, position calculations, browser prefix detection, and general helpers. The library is actively maintained with recent commits, a thorough CI pipeline, and detailed documentation including a CSP nonce feature and React 19 compatibility.
SortableJS is a mature, standalone JavaScript library for creating reorderable drag-and-drop lists and grids. It supports mouse, touch, and pointer events across modern browsers and legacy browsers like IE11 and Edge. The library is designed as a modular system with a core (Sortable class) and optional plugins (AutoScroll, Swap, MultiDrag, OnSpill) that can be mounted selectively. It exports UMD and ESM builds, integrates with major frameworks (React, Vue, Angular) via separate adapter packages, and provides a rich API with options for grouping, animation, handles, filtering, and custom events. The codebase demonstrates a well-thought-out plugin architecture, event dispatching, and animation state management, though some build tooling and browser workarounds show its age.