Image layers
You add an image to a layer by setting its image
property. Framer does this automatically when you drag an image to its window (and it will save a copy of the file to the project’s folder). You can drag images to Design, and to the editor in Code.
Images don’t have to be included in your project, though: online images work equally well.
kitty = new Layer
width: 300, height: 200
image: "http://lorempixel.com/300/200/cats"
placeholder = new Layer
width: 300, height: 200
image: "https://placehold.it/300x200/28affa/fff"
You can use the most popular image formats, which each have their advantages and drawbacks:
- JPG: Smaller files but can have compression artifacts. No transparency. Best choice for photos.
- PNG: High quality and alpha transparency.
- SVG: Vector based, so resolution independent, and supports alpha transparency.
- PDF: (Only in Code) Same as SVG: vector based, with alpha transparency.
- GIF: Can be used for simple (looping) animations. Limited to 265 colors. Only has index transparency, so transparency is either on or off (e.g., no ‘20% transparent’).
All these image formats, except for PDF, can also be dragged into Design.
Here’s an example project with the five different image formats, which also shows what happens when you resize them (by doubling their width and height).
pngLayer = new Layer
width: 320, height: 280, borderRadius: 20
image: "images/Goldfish.png"
svgLayer = new Layer
width: 320, height: 280, borderRadius: 20
image: "images/Goldfish.svg"
pdfLayer = new Layer
width: 320, height: 280, borderRadius: 20
image: "images/Goldfish.pdf"
jpgLayer = new Layer
width: 320, height: 280, borderRadius: 20
image: "images/Goldfish.jpg"
gifLayer = new Layer
width: 346, height: 280
image: "images/Blinky.gif"
Pro tip: Hold down ⌘ (command) before clicking on a layer’s image
path to see the file in the Finder.
If you look closely at the prototype above, you might notice that SVGs redraw slightly faster than PDFs when you change their width and height.
Restarting a GIF animation
A GIF animation will start playing automatically, and keep on playing when it’s a looping GIF. (There’s no start or stop function.)
There is a trick to restart an animation, though. By adding a query string to the image’s path, you’ll cause it to reload. This works both for GIFs dragged into Design and Code.
Here’s an example:
# causing the gif to reload by adding
# a “query string” to its path
space_girl.onTap ->
this.image = this.image + "?x"
When tapped, the image path will be set to:
"images/Space girl.gif?x"
After a second tap it will be:
"images/Space girl.gif?x?x"
This will happen again and again, causing the image to reload every single time.
For this example, I made a GIF of Melissa Cameron’s ‘Spacegirl’ animation, which was created in Framer using SVG paths.