motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.85k stars 849 forks source link

Reduce optimised appear animation de-opts via layout animations #2685

Closed mattgperry closed 6 months ago

mattgperry commented 6 months ago

Currently, when any layout animation fires during optimised appear animations, all optimised appear animations are cancelled.

Due to difficulties matching timings, especially on heavier sites this can result in a visual stutter.

This PR adds logic to determine whether the node performing a layout animation is, or is the ancestor of, a node performing an optimised appear animation. Only then will optimised appear animations be cancelled.

Note: All optimised appear animations are still cancelled under this model, as cancelling a WAAPI animation is a DOM write. Snapshotting elements is a DOM read. So this cancel write might be sandwiched amongst other DOM reads. By cancelling all optimised animations at the same time, we ensure there is only one read/write/read thrash, vs unlimited.