Updated – Switching from @react-spring/web to motion

[benjaminleonard]

New PR based on #2214

These libraries are very similar, but in places I prefer the framer-motion API. One such case is that you can provide it an apple style duration and bounce and still get a spring animation but without needing to contort your brain with friction, mass etc.

framer-motion does have a much bigger bundle but you can keep it down by excluding the features we don't need. The layout features in particular are very powerful but we don't do any big native style transitions to make its inclusion justifiable.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Jan 9, 2025 4:01pm

[david-crespo]

this rules

[david-crespo]

This all looks good. I noticed that the modal scrim background still fades in. Does that count as motion?

[benjaminleonard]

I believe by default it leaves opacity transitions – which from a quick straw poll previously of people with it turned on at the company seems okay to keep.

[david-crespo]

The LazyMotion thing might not be configured correctly:

# before
dist/assets/app-yEWnC-Yg.js      1,273.30 kB │ gzip: 392.99 kB │ map: 5,700.71 kB

# after
dist/assets/app-C59FWg1Z.js      1,300.20 kB │ gzip: 400.19 kB │ map: 5,920.83 kB

I'll poke at it. Lazy loading might not be that beneficial if it's going to be used on every page anyway, though it's true we don't need it immediately because we never animate on the initial pageload.

edit: ah

edit 2: I read that backwards (because it's poorly worded). It's not that strict removes the benefits; using motion instead of m would remove the benefits, and strict prevents that. I think the problem might be that we're supposed to use import * as m from "motion/react-m". I'll try it.

[david-crespo]

wazaaa. smaller than before this PR

dist/assets/motion-features-DEG9_YHT.js       53.12 kB │ gzip:  18.53 kB │ map:   311.32 kB
dist/assets/app-Bg92zneh.js                1,247.03 kB │ gzip: 382.52 kB │ map: 5,622.99 kB

[david-crespo]

Running into an issue on Vercel that only shows up after c92c32b. I discovered it with disable cache checked, but it seems to happen with it on or off. When I hard refresh, it seems like MSW is not initializing quickly enough, and the API calls are going straight through to Vite, which responds with index.html as it does to any request. That response of course fails to parse as JSON, which blows up the whole page, causing it to reload somehow (occasionally it flashes the Something Went Wrong error — that's how I noticed this). At this point everything works, presumably because MSW has spun up.

In the video, the way this manifests is that all the requests for the page are made twice. This does not happen on regular refreshes. Because this only concerns MSW, it's unlikely to be a problem in production, but I still want to hold off on merging until we understand why lazy loading messes this process up.

2025-01-09-motion-lazy-load-error.mp4

[david-crespo]

Can't repro anymore after clicking unregister on the service worker in Firefox. Saw the problem before that, went away after. Was never able to repro in Chrome. This has happened before: somehow the service worker gets in a bad state.