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

What is Framer? Join the Community
Return to index
Pete Schaffner
Posted Aug 05 - Read on Facebook

Made a little module to help you with your material design work. It has a pretty flexible API that aims to stick close to the spec and only expose the base properties that make up "material": elevation, surface reaction, color, etc.

Let me know what you think!

code: https://github.com/peteschaffner/framer-material
example: http://share.framerjs.com/wm1z4fn6nmfv/

15 Comments

Jonas Treub

Awesome work Pete!

Danny White

nice one

Balraj Chana

Great work Pete! For some reason, I can't seem to get it to work on mobile. The desktop however works perfectly :)

Paul Wan

Great+thanks!

Koen Bok

This is awesome.

Sarthak Pranit

Thanks Pete! Good stuff :)

Pete Schaffner

Balraj thanks for reporting that! It is fixed in the most recent version of the module. I updated the linked example too, but the share service seems to be experiencing some downtime ATM: http://share.framerjs.com/eagqdhh5xo1x/

Pete Schaffner

Another thing worth mentioning: make sure you have an up-to-date Framer.js lib (File > Update Framer...) as the touch reaction effect relies on some recent changes there.

Balraj Chana

Awesome, looking great Pete, thanks!

Lukas Imrich

Great work Pete!
I am using your module (love it). The only issue I have is, when I am trying to animate a layer's width/height with elevation on it. The elevation changes correctly in depth, but still maintains original width and height values of the layer before animation started.

Am I doing something wrong, or the module does not support that?

Pete Schaffner

Hey Lukas, glad you like, and good catch :) I think I know what the problem is, but am away from a computer atm. I will fix it tomorrow!

Pete Schaffner

Ok, this is now fixed. Just `npm update` in your project folder and make a change to the module file in which you require "framer-material" (to force Framer to re-compile your modules).

Pete Schaffner

I also updated the demo (thanks to Lukas for the inspiration): http://share.framerjs.com/wm1z4fn6nmfv/

Lukas Imrich

Great job Pete Schaffner, will test it out later this afternoon and thanks for such a prompt response

Read the entire post on Facebook