framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.56k stars 749 forks source link

Fixing optimised appear jump with `useLayoutEffect` and layout animations #2672

Closed mattgperry closed 3 weeks ago

mattgperry commented 1 month ago

This PR fixes a jump in optimised appear animations when useLayoutEffect triggers a state update leading to a layout animation.

By moving CancelHandoffAnimations to before the snapshot is taken, not only do we fix the snapshots but also the cancel is skipped currently in Framer as no layout animations are detected on this mount re-render, leaving the smoother animation in tact.