Menu icon Foundation
Recreate Motion UI example?

First of all, a big thank you to the guys at Zurb for giving us Foundation for Apps! After some initial troubles getting the libraries to work properly (ENOENT line 131, anyone?), I'm now enjoying every little bit of it! And, of course, I'm test driving all beautiful features.

I was looking into the new Motion UI and found something to be missing of sorts. In the pre-release blog post (http://zurb.com/article/1340/foundation-for-apps-motion-ui-is-the-new-) the first image features some Motion UI animations I really love. But in the docs (http://foundation.zurb.com/apps/docs/#!/motion-ui) I cannot find how to recreate that subtle "fade out and slide down a bit" and "fade in while sliding in from the right a bit" that is used with the mail messages part of the screen.

Does this mean I have to write myself a mixin with a custom animation to recreate the example or will the Motion UI be expanded with these kinds of animations in the near future?

Motion UI

First of all, a big thank you to the guys at Zurb for giving us Foundation for Apps! After some initial troubles getting the libraries to work properly (ENOENT line 131, anyone?), I'm now enjoying every little bit of it! And, of course, I'm test driving all beautiful features.

I was looking into the new Motion UI and found something to be missing of sorts. In the pre-release blog post (http://zurb.com/article/1340/foundation-for-apps-motion-ui-is-the-new-) the first image features some Motion UI animations I really love. But in the docs (http://foundation.zurb.com/apps/docs/#!/motion-ui) I cannot find how to recreate that subtle "fade out and slide down a bit" and "fade in while sliding in from the right a bit" that is used with the mail messages part of the screen.

Does this mean I have to write myself a mixin with a custom animation to recreate the example or will the Motion UI be expanded with these kinds of animations in the near future?

Hans McMurdy over 4 years ago

Yes and no. Fade out and slideInDown are already motion classes. You can customize these with sass with settings and predefined mixins (check out the animation mixins in "components/_motion.scss" (in bower_components if your using the cli or starter template) ).

Also for view animations don't forget to:
HTML
<div ng-class="['ui-animation']" ui-view="">
</div>

and apply the font-matter
HTML
animationIn: fadeIn
animationOut: fadeOut

However if you do plan on creating custom animations I recommend you swap out autoprefixer for pleeease because it is has support for keyframes and other flexbox prefixes missing.

Martijn Burger over 4 years ago

Hans, thanks for your reply. I did already try some of the motion classes by adding them to the front matter.

Unfortunately, I have a hard time understanding the last sentence of your reply. What exactly do you mean by that?