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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted May 24 - Read on Facebook

Hey all,

I spent some time recreating the Material Response from Google's new Design Guidelines. The .framer file contains some neat tricks (Shadow Animations, Loops and Mouse Tracking) and new Framer features. (Prefer2D). May be helpful for those just starting with Framer/Studio to play around with too.

See it live & download the .framer file here:
http://examples.framerjs.com/#material-response.framer

Check it out! :)

15 Comments

Renato Valdés Olmos

Boss.

Simon Ludwig

Nice!

Dominique Briggs

Thanks for making these, really nicely done!

Ahmad Shadeed

Very nice! Thanks for sharing.

Andrea Trabucco Campos

this is amazing! Thanks a bunch!

Alex Hazel

Except, this interaction and its animation make no sense to me as a user.

What thing/button/etc. in life do you touch and it instantly pops up at you as soon as you touch it? If you are going to use skeumorphism to mimic the real world then at least make something that feels natural.

Sure it's looks pretty but that doesn't mean it's good interaction design.

Did Google think they were being clever by saying, "Hey! Guys! Buttons always get pushed "in"...let's be the first ones to make them pop "out"! It's so revolutionary!" Yah, there is a reason no one does that....it just feels wrong. But what do I know, right?

/rant

Daniel Feldt

Alex Hazel isn't that interaction used for example reordering? In this case the animation suggests that the box sticks to your finger while dragging it and it pops back when released?

Christophe Tauziet

Good stuff. Now you make me want to add support for dragging those and see those shadows in all their beauty

Alex Hazel

Daniel Feldt If that is the case, then it makes waaaaaaaaaaay more sense. The video I watched showed them being clicked on like buttons. If they were then moved and re-ordered then I would have no problem. I guess I missed that this was unfinished??

Daniel Feldt

Alex, I might be mistaken. I skimmed Googles guide lines for material design. So I could be mistaken and this might actually be their pattern for pressing buttons. Benjamin should know, I guess he spent some time looking at the guide lines. :)

Benjamin Den Boer

Alex Hazel Daniel Feldt From the Guidelines: "When a card or separable element is activated, the card should lift to indicate an active state."

Gavin McFarland

I think there's a fine line between borrowing metaphors from the real world and creating new ones. Perhaps we have to think of buttons, less like buttons and more like new materials. In Google's example perhaps they wanted the elements on the screen to react in a materialistic way but not quite a carbon copy of buttons in real life. Perhaps they are going for a material that reacts to your finger by appearing like it's sticking to them.

Gavin McFarland

By the way, nice demo. I tried to view/download the contents of the link but I didn't have any luck.

Benjamin Den Boer

Gavin McFarland Could be a caching issue, there've been some bug fixes 2 days ago. Have you tried refreshing + emptying caches?

Daesung Kim

Thanks for the great example. Btw growing highlight is not rendered well as it meant to be in mobile browser. What would be the reason for that issue?
And could you explain below code? I couldn't understand why the property should have 'x:-10 and y: -161'. How those numbers are came from?

# Grow Highlight
highlightAnimation = Highlight.animate
properties:
width: Field.width + 20, height: 400, opacity: 1, x:-10, y: -161 # Half of new height & half of Cursor height

Read the entire post on Facebook