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

What is Framer? Join the Community
Return to index
David Lee
Posted Jun 15 - Read on Facebook

I tried a quick List-Map transition effect.
It's a draft so any comments are welcome :)


Stephen Crowley

Love the transition David! Would the List Button show in the Map view? And vice versa?

David Lee

Very nicely done. I love it!

Veronica Jimenez-Miller


David Lee

Stephen Crowley Oh.. Thanks for the feedback! It was a real quick one. I slipped that.

David Lee

Özkan Isik Yeah you are right. I missed that.

Stephen Crowley

haha :)

David Lee

Stephen Crowley Özkan Isik I think I was so into the prototyping. Thanks for letting me know haha.

Stephen Crowley

All good man! It's a trap I fall into some times when getting into prototyping. If it's a larger project I start with good ol' paper and pen but always take a step back and have to do a cognitive walkthrough. Yours is a simple fix- the transition from the two modes is really elegant and guides the users towards what is happening. Works really well.

Chad Lonberger

Really nice David Lee! Love to know how you are animating the icon/hamburger menu.. Via SVG, clipping mask, or skewing each bar layer in 3d to appear as parallelograms? Thanks in advance, great work.

Ash Adamson

veeery nice!

Brain Rush

Super cool.

Mauro Beheadoth

Very Nice

Jake Sawyer

Put it on Dribbble and receive all the upvotes. Very nicely done :D

David Lee

Chad Lonberger I used .rotation and .skew functions to make this. I don't know why skew function is not listed in framer docs page, but I just tried it because it's one of the css3 effects.

David Lee

Randy Huynh Haha I like the gif :) Thanks.

Steve Lee Marreros Chuco

Hey David. Just one comment. I think the transition itself is pretty cool. There is something that I don't agree. I think if you press the list button, a list should be displayed. If you press the map button, a map should be displayed. However, your animation is the opposite. I think, that's confusing. Why you don't change the position of each button. That will make more sense to me.

David Lee

Steve Lee Marreros Chuco Hey Thanks for the feedback. Yeah you are right. It was already addressed by others on the comments. It was a real quick sketch and I missed that point. I found out after I uploaded the video haha. I'll definitely fix that. Anyway, thanks!

David Lee

Here's a quick fix :)

Adam Laskowitz

I actually think the list/map button correspondence makes sense. I see it as more of an icon for a state rather than a "menu" kind of function

Sylvain Kohli

Nice job 👍🏻

Stephen Crowley

Don't disagree with you on "state" change Adam - and I think that by actually switching the icons (like David did in draft 2) alleviates unpredictable change aversion, resulting in a bad UX. Reducing any cognitive friction is best.

Chad Lonberger

David Lee Great thanks for the tip!

Andreas Wahlström

David Lee I added the .skew property but never sent a pull request to update the docs. Glad you found it anyway :) Great stuff as always!

David Lee

Andreas Wahlström Thanks for adding it :)

Read the entire post on Facebook