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

What is Framer? Join the Community
Return to index
Min-Sang Choi
Posted Jul 29 - Read on Facebook

Here's another Material Transition Example. Tried to move FAB button along the path. hope you enjoy.

https://dribbble.com/shots/1659259-Material-Design-with-Framer-js?list=users&offset=0

interactive version : http://qcnoodling.com/material-transition2.framer/

16 Comments

Adam Laskowitz

Really nice!

Adam Laskowitz

How do you get the prototype centered on the screen like that?

Min-Sang Choi
Min-Sang Choi

1.Make a superlayer works like a container of rest of layers. 2.center it. 3. Make a background layer to hide default grid.

Stephen Crowley

Beautiful as always my dude. I re-watched Material Design Principles btw- we are in exciting time as Interaction Designers. https://www.youtube.com/watch?v=isYZXwaP3Q4

Min-Sang Choi

Stephen Crowley agreed. material design is really exciting subject to play with. :-)

Julius Gehrig

Really cool Work! could you tell me how you made the button follow a curve before filling in the superlayer?

Min-Sang Choi

Julius Gehrig that's pretty simple trick. I rotated superlayer of circle button. so it looks like follow the curve. :-)

Julius Gehrig

Min-Sang Choi aah i see nice trick! :D

Noah Levin

Clever! Also, that source you linked to looks like it's for a different one? Would be great to see the source for this one, or post it to examples

Min-Sang Choi

Noah Levin yeah that was the source of jorn for centering prototype to screen. you can check mine at here: http://qcnoodling.com/material-transition2.framer/

Noah Levin

You should consider placing it in to the framer examples site ;-) also would be great if there was a way to reverse the animation without a page refresh

Min-Sang Choi

Noah Levin will do :-) (plus the reversing)

Min-Sang Choi

guys, here's the version with reverse animation. enjoy. http://qcnoodling.com/material-curve.framer/

Adam Laskowitz

Don't see the reverse...

Min-Sang Choi

Adam Laskowitz that's weird. I see that now. anyway check the video instead :-) https://www.dropbox.com/s/yzbw1cvcjgqcxub/reversing.mov

Read the entire post on Facebook