Menu icon Foundation
Motion-ui & Foundation 6 Advanced Template

Alright so I am building with Foundation 6 advanced Zurb template, http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template, which comes with the Motion-ui already installed and added in the app.scss.

Why is it when I am trying to add slide-in-left for instance it does nothing? You can see by the screenshots below I have added the classes (slide-in-left and slide-in-right) according to the Motion-ui documentation and that it is included in the app.scss and gulpfile.

When I run foundation watch it builds everything fine, however, it does appear that motion-ui isn't getting built into the final app.css file. Although when I used the following snippet from the motion-ui github docs it built into the app.css with animation-name: custom-1:

Any idea what I am missing?

.slide-and-fade-and-spin {
  @include mui-animation(slide, fade, spin(120deg));
}

Screen shot 2015 11 24 at 2.48.19 pm

Screen shot 2015 11 24 at 2.48.34 pm

motion-uiSassbuildproblem

Alright so I am building with Foundation 6 advanced Zurb template, http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template, which comes with the Motion-ui already installed and added in the app.scss.

Why is it when I am trying to add slide-in-left for instance it does nothing? You can see by the screenshots below I have added the classes (slide-in-left and slide-in-right) according to the Motion-ui documentation and that it is included in the app.scss and gulpfile.

When I run foundation watch it builds everything fine, however, it does appear that motion-ui isn't getting built into the final app.css file. Although when I used the following snippet from the motion-ui github docs it built into the app.css with animation-name: custom-1:

Any idea what I am missing?

.slide-and-fade-and-spin {
  @include mui-animation(slide, fade, spin(120deg));
}

Screen shot 2015 11 24 at 2.48.19 pm

Screen shot 2015 11 24 at 2.48.34 pm
Sam Kitson over 3 years ago

I'm having similar problems, nothing happens when I try and use the motion ui classes. I thought the transitions and animations would trigger on page load? I'm using the basic template and it looks like all the css and js is included by default.

Did you get anywhere with this?

Glenn Philp over 3 years ago

Hey Sam, I haven't found any solutions. I even hit Zurb Foundation up on Twitter asking them for any insight to this forum question. They did respond saying they will be glad to look into it. However, no response yet.

brianl@scgpr.com over 3 years ago

Struggling here with this as well. Works when using MotionUI with jQuery but trouble with getting the built in animation classes to work.