Our New Canvas: To Infinity and Beyond

Our New Framer X Canvas

How the engineering team learned to stop worrying and love web rendering.

jan

Jan Van Boghout

February 7, 2019

Last week we launched Framer X15 with a whole host of performance improvements. The meat of the release centered around the workflow for the pro visual designer. And while the entire experience in Framer X now feels modern and seamless, the engineering motivations that powered it date all the way back to May 2017, when we first added a canvas to our original product, Framer Classic.

Your canvas is the web

The canvases in both Framer Classic and X depend on WebKit, one of the powerhouse engines that drive much of your daily internet experience. The ubiquity of web browsers make it easy to take them for granted. But these pedal-to-the-metal monsters handle complex layouts with dynamic styling and advanced effects millions of times a day, all while providing a JavaScript runtime that competes with the best native programming environments. We stand on the shoulders of giants, who empower us to offer amazing features using production-ready React components right in your design space.

Webkit

Design in an era of components

Framer X is a result of the uncompromising vision that design is more than pictures of the real thing. To carry out that vision, the canvas supports almost anything a modern UI can do—video players, animations, even iframes. As a result, designers at Framer do 99% of their work using our own product. They love its unique capabilities, but until recently, were resigned to the status quo when it came to scrolling, zooming and general graphics editing in Framer X. Apps that optimize for static design were objectively smoother. While we had speed by productivity down pat, raw canvas performance was lacking.

Like any graphics tool worth its salt, Framer X needs dynamic GPU mapping and smart rasterization tiling to get to the Fast Place. As it happens, the modern browser engines we use offer this and much more. However, they do have a weakness: speed-ups and shortcuts exist everywhere, but once you venture into uncommon territory, things become really slow, really fast. With a product as dynamic as Framer X, this is far more likely than for your average webpage.

GPU

Fixing all the things

We needed more performance and control to elevate Framer X to the next level. First, we took charge of the interaction event flow and started treating WebKit strictly as an advanced graphics subsystem. In our old architecture, built-in browser scrolling and behavior powered the canvas. Combined with React’s lifecycle doing a lot of work, performance would become highly unpredictable. This also caused unexpected scrolling issues—just the browser being helpful for actual websites. After taking a deep breath, the engineering team dove in and reorganized the core structure to put us back in the driver’s seat.

After that initial push, our rendering engine was in a place where we could start measuring repeated performance instead of using the (excellent but ad hoc) WebKit and Chrome developer tools. The canvas ended up both speeding up and working less, typical for any big optimization project. Our craziest discovery was a single CSS rule causing a 10% performance hit. Displaying your designs is faster because we cracked down on things like style recalculations and cases of double rendering, but we also try hard to avoid doing any work at all when responsiveness is crucial—like while panning and zooming.

The old canvas predated React components and was intended for designs with a dozen static screens and a few icons. We had been exploring infinity for some time, driven by users who kept taking their projects further and further. With X15, Framer has the infinite canvas you deserve. You’ll never go over the edge again.

Pushing the limits

Smooth zoom was a high level goal from the start, but we weren’t sure it would be up to our standards until halfway through our efforts. Previous versions of Framer X tried hard to take advantage of WebKit’s GPU savvy, but it turns out we had been fighting many amazing built-in optimizations that kick in when you do nothing whatsoever. This sounds a bit exaggerated, but it’s impressively close to the truth. Browsers have been shuttling quadrillions of pixels across your hardware for decades so it makes sense that they’re pretty damn good at it. So good that when you move about the canvas now, it scrolls like… butter.

Framer X15 sets a new baseline

Overall, we’re thrilled with such dramatic results, and the team is motivated to keep it up. Speed benefits everyone but is absolutely essential for pro designers, so expect more improvements in the future. Additionally, this work gives us a more comfortable performance budget for subtle animations that put a smile on your face. With a tight deadline and high expectations, it was invigorating to see our engineers deliver. We think you’ll feel the same using the finished product. Find out what else is new and try it for yourself today.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

X15: Our Biggest Release To Date

Read more ›

Popmotion Joins Framer

Read more ›

Featured Framer X Packages: December

Read more ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.