Framer Classic » Layers » Image layers

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"
Download Framer project
Layers with images from lorempixel.com and placehold.it

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"
Download Framer project

Pro tip: Hold down (command) before clicking on a layer’s image path to see the file in the Finder.

Different image layers. Click on an image to double its size

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"
Download Framer project

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.

Restarting a GIF animation

Leave a Reply