This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Andrew Nalband
Posted Jul 23 - Read on Facebook

I've been using framer to prototype a game with an 8bit graphic design style. We're using tiny graphics and scaling them up on the device. For example, the "pitch ball" image I've attached to this post is only 100x20 pixels but we scale it to nearly the full width of an iPhone 6.

The trouble is that if you do this with the default image scaling in Framer it gets sort of blurry because of the normal way the scaling is done.

I've been able to get the file to scale up nicely and stay crisp and blocky in the broswer by adding this to the CSS file

.framerLayer {
image-rendering: pixelated;
}

However, I can't get it to look crisp in framer app (see attached images). Is there any way to get Framer to scale images in a way other that the default? (This is a rare case when I actually want that blocky pixelated look)

4 Comments

Jordan Robert Dobson

Try zoom: 3

Jordan Robert Dobson

^ CSS style

Jordan Robert Dobson

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Also make sure you use the -WebKit flag... Or do both. Sometimes there are differences in support from browser to studio viewer

Jordan Robert Dobson

You could even try this approach for certain items?
http://codepen.io/zessx/pen/BsfFt/

Read the entire post on Facebook