humanspeak / svelte-motion

60%

main: 57%

LAST BUILD ON BRANCH fix/presence-exit-placeholder-slot

branch: SELECT

CHANGE BRANCH

x

Sync Branches

• No branch selected
• chore/deps-motion-12.39.0
• chore/package-updates
• chore/typed-lint-recommended
• ci/drop-node-20
• ci/readme-ecosystem-footer
• codex/docs-code-block-button
• codex/motion-value-children
• codex/object-style-motion-values-317
• codex/optimized-appear-animations
• codex/posthog-integration
• codex/transform-template-316
• codex/use-animation-controls
• codex/use-presence-data-parity
• codex/wip-command-center
• docs-kit-update
• docs-ui-ux
• docs-ui-ux-batch-2
• feat/ai-glow-border-example
• feat/animate-view
• feat/layout-animation-cluster
• feat/layout-group
• feat/motion-custom-prop
• feat/pan-gesture
• feat/projection-page-space
• feat/reorder
• feat/runes-w2-boolean-snapshots
• feat/runes-w3-motion-values
• feat/seo-geo-improvements
• feat/svg-motion-value-attributes
• feat/use-animate
• feat/use-cycle
• feat/use-follow-value
• feat/use-in-view
• feat/use-presence
• feat/use-reduced-motion
• feat/vanilla-motion-values
• feat/variant-string-keys
• feat/while-in-view-viewport
• fix/animate-augmented-motion-value-typing
• fix/animate-transform-persist
• fix/drag-transform-composition
• fix/presence-exit-placeholder-slot
• fix/release-cleanup-always-run
• fix/seo-unique-titles
• fix/upstream-parity-12.41
• fix/usepresence-svelte-5-55-7-main
• fix/whiletap-release-overshoot
• initial-creation
• issue-417
• layout-dependency
• main
• mobile-drawer
• use-will-change

Build # 29851475245

Build Type

push

github

Committed by web-flow

Commit Message

fix(animate-presence): exit in place — placeholder slot anchoring, clone position, key={0} (#448)

* test(animate-presence): capture grid exit placeholder slot regressions

Red against current code: when a keyed child exits from a CSS grid, the
slot-holding placeholder lands before the entire display:contents
presence container (always column 1), so surviving siblings get shoved a
column over during the exit and shuffle back after it — instead of
holding still, then FLIPing once into the freed slot.

- unit: placeholder must land in the exiting child's own slot (first/
  middle/last/two simultaneous exits), anchored past Svelte-injected
  sibling nodes that detach with the child
- e2e: frame-by-frame sampling of a 3-column grid — survivors hold
  while the clone fades, then slide (never snap) into place
- repro page under tests/animate-presence/grid-exit, linked from home

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(animate-presence): anchor exit placeholder in the exiting child's slot

The placeholder that holds an exiting child's layout slot was inserted
via findLayoutInsertionParent, which walked up past display:contents
parents and anchored before the wrapper it found — but that wrapper is
AnimatePresence's own container holding every sibling, so the
placeholder always landed in the first slot. In a grid this shoved all
surviving cards one column over for the duration of the exit, then
shuffled them back once it finished.

Anchoring on the element itself doesn't work either: Svelte detaches
keyed nodes before unregisterChild runs, and the element's raw
nextElementSibling is a Svelte-injected <script> node that detaches
with it. Instead, track each child's next registered sibling (or live
placeholder) while it is still connected, refreshed whenever the child
set changes, and at exit time walk that chain past siblings that
detached in the same update to find a live anchor.

Siblings now hold their slots while the exit clone fades, ... (continued)

Coverage Stats

874 of 1682 branches covered (51.96%)

Branch coverage included in aggregate %.

35 of 36 new or added lines in 2 files covered. (97.22%)

3348 of 5331 relevant lines covered (62.8%)

23.84 hits per line