framer / motion

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

[BUG] LazyMotion sets `initial` immediately; before `LazyMotion.features` load #2601

Open o-alexandrov opened 1 month ago

o-alexandrov commented 1 month ago

According to docs, LazyMotion:

animation will run when loadFeatures resolves.

However, initial part of MotionProps is set immediately.

<m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>{children}</m.div>

Problems:

  1. The user won't see the content until LazyMotion.features are loaded.
  2. It decreases the value of bundle splitting (due to PageSpeed First Contentful Paint; the content is not visible).

CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-lazymotion-32vhxp

Steps to reproduce

Steps to reproduce the behavior:

  1. Open CodeSandbox
  2. See the bug: there's no Hello printed on the screen because initial is triggered immediately

Expected behavior

If LazyMotion.features are loaded, only then initial, animate, exit and other MotionProps should trigger.