Any idea if such animation would be achievable with framer?
Check this out by Jun-Hyuk Jang: https://www.facebook.com/the.junhyuk/videos/o.385961098197634/952493964762760/
Its do-able but a bit hacky. I did this small example based on a codrops article showing how to achieve effects like this with svg-- if anyone knows of a better way! http://share.framerjs.com/y2kqdvumg1vj/
Edit: the article http://tympanus.net/codrops/2014/12/15/elastic-svg-elements/
It is possible with filters, however not recommended as even if you'd make something like that in a prototype, there is a little chance that will reach production as long as you can't guarantee your target audience to be on the latest upgrades.
It will not look like that, though. As the output of timeline-based animation tools such as after effects can never be translated to code in such a detailed way.
Sure it can, it's just hard.
You can made animations in AE and trigger them in framer
Doesn't the Skype ios app do a less extreme version of this on their menu drawer animation? This one is juuuuuicy though.
Lukas, who is the author on Behance?
Guys, thanks for the suggestions and sorry for not mentioning the source straight away: here it is https://www.behance.net/gallery/25685965/Feely-Chat-App
Mike Feldstein It's really really hard to do so. If the whole animations were done by expressions in AE, well then it'll easier, but otherwise it's hard and something like that "edge crispness" in motion is not possible with filters though. It'll get fuzzy... and it'll not run in 60fps in production.
always keep in your head, we design for final products not for eye-candy and dribbble likes.
This might be a fun SVG expirement to try at the Seattle framer JS meetup.
here I found something less exaggerated, less dynamic http://codepen.io/suez/pen/emjwvP
Animating WebKit mask points might be able to do this as well.
Jordan Robert Dobson that would be great. I can demo how I got the codrops thing working and we can do some experiments to push it farther
Callil, I would love to see the result then :)
I've done this using paper.js and framer, and the code was actually pretty simple. I just mapped framer layer position to svg path point position. The problem was the animation was jagged and I couldn't figure out why. I'm on mobile now but share the link tomorrow.
Other than looking interesting I don't see a functional reason for it to take on a soft material non rectangular shape. It tries too hard to convey cool for no reason.
German Bauer, I agree, it definitely puts form over function and as a general pattern for interaction with a drawer its just too over the top animation for no reason.
However, as a concept to push or to see whats possible with framer it works great. I would like to see, the ways how to simulate that soft material natural elasticity. And possibly, one day it comes handy in a meaningful way.
I think there are subtleties German that you can take from making something like this and apply to your designs in a more low key way.
I'm not referring to over the top vs not, I'm referring to something this noticeable implies that it has something meaningful to convey to the user which is not the case here. In other words the form is left there without the function it should originate from. But as Lukas Imrich implied it's cool as an experiment to see if this can be done in Framer.
Sometimes fun is the function. Maybe it makes more sense as a game menu than in a messaging app though
Have you guys recently seen any car? Or a chair? Or a building? Or pretty much any human created object? Do you think everything on those was created with just function in mind? Decorative function is important. Often critically important :-)
chairs and buildings are obvious and multi-sensory physical objects with a history and experience of usage and therefore plenty of room for decoration. Software has no physical equivalent and is a very limited experience. People who use software draw from what they see and assume meaning from what they see. Decoration alone is too low a bar to waste pixels on.
Games are one example where this could be appropriate. Or any place you want some character or something to standout and be memorable.
On the other side, I think, Josef was trying to tell, that products are not just about utility, there is always to some extent some emotional aspect. Thats a legitimate goal, which should be supported. (like games)
I guess we all agree, that using decorations for just the sake of having them, is no go in design.
There's a drawer that needs to be pulled past some threshold to be opened. How do you convey this? Well 99% of designers and developers (and Framer guys :D) would probably smash there spring animation to indicate you released it before the threshold. but you find out only once you fail first. while with this approach you get immediate feedback that the object gives some resistance and you need to pull it further. It's actually maybe the best solution to this problem around. We may discuss whether it could be more subtle and less cartoonish, but any talk about useless decorations is off topic here. Btw if German Bauer was right, we would still be using MS-DOS user interface…
MS-DOS is not minimal by any means, It requires an arbitrary, invisibly remembered language to invoke commands and is by not direct manipulation. In that sense it is similar to decoration as decoration does not have a relation to the underlying function.Personality and delight are great and are most effective from magic moments when an interface solves a real problem or anticipates your needs, and takes a transition or well crafted animation to explain the magic. For decoration's sake it maybe playful the first time but gets annoying real fast as it feels labored and self-indulgent (dribbbly?) after a while where swift and out of the way are being asked for.
Good discussion but also realizing that this is the Framer group, where it is part of the fun to explore new ways implementing things in Framer and pushing the boundaries - and I am all for that. Now back to Lukas Imrich's original question... :)
Any time design pushes dev it's a great thing imho. Our tools shape us, but the needs of our (insistent) imaginations shape tooling. Wrt Framer, it's tough but doable. Real question is, do your devs have a "how might we" mentality. Otherwise it's fairly easy to design something that "isn't buildable". For ex, FB did an astounding amount of engineering making paper a reality after our origami friends brought the challenge. 👍
Any idea in native iOS and Android
Should not be difficult to do in code (JS or otherwise) by programming actual physics in the shape points.
Actually I have a few things to do this morning, but I'll try to put a codepen together later. Sounds like an interesting challenge ;)
Thats the spirit :) cant wait to see it.
Min Tran Wow, look at this :D
Here it is. (pure JS, I'm not as fluent with CS)
The drawing done with "polygons" instead of proper bezier curves (didn't want to put more time on that right now) and some of the math functions and calculations can be optimized in case you want to use it in production, but it can give you an idea of how to code something like this ;)
Javier you're the man! :D
I'm also figuring out that in the case of not needing "proper physics" for the effect, it can be faked by using only bezier curves and simple easing functions (similar to how Material design does it when reaching the end of a scroll)
This would save a lot of processing power.
I'd like to code "the simpler version" when I have some more free time.
Ok, here it is without all the physics bells and whistles, pretty similar to how material design works.
This example has linear easing. To achieve a more bouncy effect you'd have to add speed / acceleration to the system (wait for it because I'll do a third version with this) but I thought this would be easier to understand, as it has one layer less of complexity.
And here's the latest version with bounce easing. For any questions regarding those examples, write here or get in touch with me.
Javier Díaz, LOVE the example!
where you get this animation，bro
The app of this guy does something similar...http://youtu.be/pj18XFVjXiw he use UIkitDynamics a framework of apple...very cool
Javier Díaz Great work, the first example is pure magic for me :), the second one, still :). I never used canvas element to draw. Hopefully one day, I will. Thanks for your efforts.
Np. I'm starting to learn CS and Framer. I'll try to port this soon.