Animation Update

Our open source animation library Framer Motion powers all animations in Framer. Motion already splits every animation frame into distinct read and write phases. This way, all reads and writes are batched together, as mixing them can trigger unnecessary style and layout recalculations. Today, Framer is introducing deferred keyframe resolution. This ensures that when animating unknown values or animating between different value units (think PX values and % values) we defer the start of the animation until the next animation frame and batch these reads / writes. This is similar to how CSS works in the browser, and is incredible for performance. So good, that when animating values that need to first be read from the DOM, Framer is now 2.5× faster than before. And when converting between value types, it’s a whopping 6× faster than before. Additionally, we’ve done some more work to move other features on the Motion render loop, like Relative Overlays and Custom Cursors, which all contributes to smoother animations on effect-heavy sites. To enjoy these performance improvements, simply refresh and republish your website—that’s all it takes.