Framer Motion Performance: What I Wish I Knew Earlier

My portfolio has a transition overlay that animates 80 pixel blocks, 6 glitch bars, and a scanline effect — all at once. The first version ran at about 12fps on mobile.

The fix was surprisingly simple: pre-generate everything. Instead of creating random values inside the render function, I moved all the particle arrays to module scope. This eliminated thousands of object allocations per transition.

Another lesson: exit animations are expensive. AnimatePresence tracks every child and orchestrates their removal. If you have many children with exit animations, consider batching them or using a single parent exit instead.

The biggest win came from using CSS animations for repeating effects (like the CRT scanline and pixel rain) and reserving Framer Motion for one-shot transitions. CSS animations run on the compositor thread and don't block JavaScript.

Final tip: useTransform and useMotionValue are your friends. They let you derive animated values without triggering React re-renders. I use them for scroll-linked effects that would otherwise murder performance.