iOS Background Blur in Framer JS
True blur effects in the browser
After Apple released iOS 7, I don’t know a single web designer or front end developer who didn’t try or bemoan the lack of support of background blur within web browsers.
Blurry. Hack-free. And perfect for prototyping. Finally.
Here’s how to do it
1. Add a background blur to a layer in your Framer file:
2. Because the Framer simulator doesn’t run on Nightly, you’ll have to run the prototype outside of Framer Studio. Download the latest version of Webkit Nightly (the latest build of the Webkit/Safari browser). To ensure the framer file loads consistently, turn off caching and disable local file restrictions in the “Develop” tab (you can enable this by going to Safari > preferences > advanced > enable develop tab).
Update (8.24.15): John Anthony Evans brought it to my attention that iOS 9 Safari now supports blur as well, which means running a prototype on your iPhone will soon support blur. The future is bright.
3. Open the index file of your framer document in Webkit Nightly and enjoy that frosted goodness.
Here’s the code I used in my example:
storyActionsLayers = Framer.Importer.load 'imported/Story Actions'
blur = new Layer
backgroundColor: 'rgba(255, 255, 255, 0.4)'
blur.draggable = true
Thanks to Brian Lovin for making edits to this piece.