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

What is Framer? Join the Community
Return to index
Lukas Imrich
Posted Jun 09 - Read on Facebook

Any idea if such animation would be achievable with framer?

46 Comments

Callil Capuozzo

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/

Andreas Mitschke

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.

Mike Feldstein

Sure it can, it's just hard.

Jan Semler

You can made animations in AE and trigger them in framer

Michael Tomkins

Doesn't the Skype ios app do a less extreme version of this on their menu drawer animation? This one is juuuuuicy though.

Pasquale Simonetti

Lukas, who is the author on Behance?

Lukas Imrich

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

Andreas Mitschke

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.

Jordan Robert Dobson

This might be a fun SVG expirement to try at the Seattle framer JS meetup.

Lukas Imrich

here I found something less exaggerated, less dynamic http://codepen.io/suez/pen/emjwvP

Jordan Robert Dobson

Animating WebKit mask points might be able to do this as well.

Callil Capuozzo

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

Lukas Imrich

Callil, I would love to see the result then :)

Josef Richter

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.

German Bauer

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.

Lukas Imrich

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.

Matthew Irwin

Yes.

Robin Raszka

Total cliché

Jordan Robert Dobson

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.

German Bauer

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.

Mike Feldstein

Sometimes fun is the function. Maybe it makes more sense as a game menu than in a messaging app though

Josef Richter

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 :-)

German Bauer

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.

Jordan Robert Dobson

Games are one example where this could be appropriate. Or any place you want some character or something to standout and be memorable.

Lukas Imrich

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.

Josef Richter

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…

German Bauer

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.

German Bauer

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... :)

Chad Lonberger

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. 👍

Usman Afzal

Any idea in native iOS and Android

Derrick Morton

using this

Javier Díaz

Should not be difficult to do in code (JS or otherwise) by programming actual physics in the shape points.

Javier Díaz

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 ;)

Lukas Imrich

Thats the spirit :) cant wait to see it.

Tri Nguyen

Min Tran Wow, look at this :D

Javier Díaz

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 ;)

Enjoy!

http://codepen.io/edokoa/pen/RPVJPG?editors=001

Fran Pérez

Javier you're the man! :D

Javier Díaz

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.

Javier Díaz

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.

http://codepen.io/edokoa/pen/EjmeYQ

Javier Díaz

And here's the latest version with bounce easing. For any questions regarding those examples, write here or get in touch with me.

http://codepen.io/edokoa/pen/Kpmxvv

Jonatan Castro

Javier Díaz, LOVE the example!

Yao Nan

where you get this animation,bro

Romesh Perera

The app of this guy does something similar...http://youtu.be/pj18XFVjXiw he use UIkitDynamics a framework of apple...very cool

Lukas Imrich

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.

Javier Díaz

Np. I'm starting to learn CS and Framer. I'll try to port this soon.

Read the entire post on Facebook