I tried a quick List-Map transition effect. It's a draft so any comments are welcome :)
Love the transition David! Would the List Button show in the Map view? And vice versa?
Very nicely done. I love it!
Stephen Crowley Oh.. Thanks for the feedback! It was a real quick one. I slipped that.
Özkan Isik Yeah you are right. I missed that.
Stephen Crowley Özkan Isik I think I was so into the prototyping. Thanks for letting me know haha.
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.
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.
Put it on Dribbble and receive all the upvotes. Very nicely done :D
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.
Randy Huynh Haha I like the gif :) Thanks.
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.
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!
Here's a quick fix :) http://youtu.be/Z5REDEFe-i4
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
Nice job 👍🏻
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.
David Lee Great thanks for the tip!
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!
Andreas Wahlström Thanks for adding it :)