CodeVetter · Repo Unpack · Behavior traces
motiondivision/motion
Three principal flows were followed across concrete source files: playground startup, imperative DOM animation, and scroll-driven playback. Additional traces cover React component mounting, scoped cleanup, exit completion, and browser view transitions. These traces describe execution order and material branches observed in source. They do not report runtime verification.
- Playground startup: main.tsx calls createRoot(...).render(<StrictMode><App/></StrictMode>); App eagerly imports fixture App exports, reads example/test query parameters, prioritizes example, and renders the selected module or ExampleList.
- Primary animation entry: motion → framer-motion/dom → createScopedAnimate's scopedAnimate → animateSubject → resolveSubjects; sequence-shaped input instead enters animateSequence before subject dispatch.
- DOM animation continuation: animateSubject → animateElement → animateValues or animateEffectSubject → value.start(animateMotionValue(...)) → AsyncMotionValueAnimation → keyframe resolution → native animation or JSAnimation; NativeAnimation construction failures take the JS branch.
- Scroll playback: scroll defaults axis/container and calls attachToAnimation; compatible native ranges attach a cached ScrollTimeline/ViewTimeline, while fallback observe pauses controls and sets time to iterationDuration × measured axis progress.
- Scroll measurement and disposal: scrollInfo creates handlers and one listener per container; scroll events schedule measureAll in frame.read, then notifyAll in preUpdate; final subscriber removal releases scroll/resize listeners and content-size polling.
- React mount: motion proxy property access creates/caches a component; createMotionComponent initializes visual state and browser-only VisualElements; layout effects update features and schedule rendering, and animateChanges normally runs in a passive effect but runs earlier for optimized-appear handoff.
- Scoped and presence completion: useAnimate registers groups in scope.animations and stops remaining groups on unmount; AnimatePresence marks individual exits complete, waits for all tracked exits, re-diffs children, and invokes safeToRemove/onExitComplete.
- View transition: startViewAnimation names/measures old layers and commits CSS, calls document.startViewTransition(callback), awaits update(), resolves/measures new layers and crop rules, wraps generated animations, and removes names/CSS on completion; unsupported browsers execute update without animation.