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

What is Framer? Join the Community
Return to index
Brett Holcomb
Posted Jan 28 - Read on Facebook

Played around a bit and prototyped a couple of ideas for a share button interaction. I was using Sketch initially, but wasn't super motivated to learn it since I primarily use Illustrator and the capabilities seem to mostly overlap. Ultimately just used HTML since what I was doing was pretty simple.
Expanding Share Button:
Zoom In on Share Button:

One interesting thing is that the Zoom In option is fuzzy for me when it's zoomed in, but when I Cmd+Opt+I to inspect it fixes the fuzziness. Guessing this is forcing some sort of rerender.


Koen Bok

This is why you get the fuzzyness:

There are two ways to render a "scaling" animation. One is to animate the width and height of a view. This re-renders the view (and all the contents like fonts and images) every frame. That means it's a slow way to render (but often still fast enough) but preserves the highest output quality.

The other way is the .scale(X|Y|Z) property. This basically just tells you GPU (you video card) to scale the layer it already is rendering. The GPU only knows about the pixels it currently has for that layer, not how they got on the screen or where they came from (a comparison would be png vs psd). That means if you scale something up from 1 to 2 it will interpolate pixels in between rather then re-render to get the sharpest result. Now, the upside is that this is blazing fast because this is the GPU's bread and butter.

The trick to good and smooth animations is understanding this and picking wisely. For example, if you animation scales down, always use the .scale because the interpolation will look as good as the rendered version. That also means that if you can predict upfront that somethings biggest scale is going to be 2x you can render it twice as big initially and scale it down to .5x. Then when you scale it up, it will be fast but still look good because it does not have to interpolate.

I hope this is useful :-) Happy prototyping.

Brett Holcomb

Thanks for the detailed explanation Koen! That's very helpful.

Thomas Aylott

Sometimes you can be tricky and combine multiple layers together to make a single effect. e.g. if you have a rounded rectangle that resizes, you could split it up into 3 or 9 separate layers and scale the ones in the middle and move the corners.

That is almost always a terrible idea, but sometimes it's the only way.

Read the entire post on Facebook