humanspeak / svelte-motion / 26126372335

68%

main: 3%

push

github

feat(layout): add layoutScroll prop for FLIP inside scroll containers (+ nested ancestor support) (#352)

* feat(layout): add layoutScroll prop for FLIP inside scroll containers

Add framer-motion's `layoutScroll` prop. Mark a `motion.*` element as a
scroll container with `layoutScroll` so descendant `layout` animations
measure rects in that container's coordinate space. Without it,
scrolling the container mid-animation makes FLIP measurements read the
viewport-relative offset as movement and the animation visibly drifts.

```svelte
<motion.div layoutScroll style="overflow: auto; height: 320px;">
    <motion.div layout>resize me, then scroll the container</motion.div>
</motion.div>
```

Closes #313. Top of the layout-animation cluster; subsequent props
(LayoutGroup #311, layoutDependency #314, layoutRoot #315) will follow.

Implementation:
  - src/lib/types.ts: new `layoutScroll?: boolean` on `MotionProps`
  - src/lib/components/layoutScroll.context.ts (new): publish/consume
    a deferred element-ref via Svelte context. The thunk pattern is
    required because the parent's `element` ref binds after mount but
    descendants need to find it at measure-time
  - src/lib/utils/layout.ts: `measureRect` gains an optional
    `scrollContainer` arg; when provided, the returned rect is shifted
    into that container's scroll coordinate space (scrollTop/scrollLeft
    added to top/left). FLIP deltas computed across two such
    measurements stay zero when only scroll changes between them.
  - src/lib/html/_MotionContainer.svelte: capture ancestor's scroll-
    container ref at init (BEFORE shadowing the context with our own),
    thread the ancestor's element through all four measureRect call
    sites (own-layout, layoutId-snapshot, layoutId-FLIP-from)

Coverage:
  - src/lib/utils/layout.spec.ts: 3 new cases — ignores scrollContainer
    when absent; adds scrollTop/scrollLeft when present; zero delta
    when only scroll changes between two measurements
  -... (continued)

466 of 620 branches covered (75.16%)

Branch coverage included in aggregate %.

19 of 28 new or added lines in 3 files covered. (67.86%)

1768 of 2643 relevant lines covered (66.89%)

10.27 hits per line