Menu icon Foundation
Can't get Motion UI to work

Hi folks,

I may just be a noob, but I cannot get Motion UI to work. I'm trying to get my top-bar sub-menus to fade in. I found the Motion UI doc page to be pretty lacking (no real concrete examples I feel), so maybe I'm just doing it completely wrong... if so, can anyone shed some light? Thanks!

I just thought of this actually... is the reason it's not working, because you for some reason aren't allowed to animate a child element? I noticed the example on the doc page shows a "sibling" relationship, more or less, between the toggler and "togglee".

<li class="has-submenu">
  <a href="#" data-toggle="motion" aria-controls="motion">Why Schmidts</a>
  <ul class="menu submenu vertical" data-submenu id="motion" data-toggler data-animate="fade-in fade-out">
    <li><a>The Company</a></li>
    <li><a>The Team</a></li>
    <li><a>News Blog</a></li>
    <li><a>Video Library</a></li>
    <li><a>Testimonials</a></li>
    <li><a>Showroom</a></li>
  </ul>
</li>

motionMotion UI

Hi folks,

I may just be a noob, but I cannot get Motion UI to work. I'm trying to get my top-bar sub-menus to fade in. I found the Motion UI doc page to be pretty lacking (no real concrete examples I feel), so maybe I'm just doing it completely wrong... if so, can anyone shed some light? Thanks!

I just thought of this actually... is the reason it's not working, because you for some reason aren't allowed to animate a child element? I noticed the example on the doc page shows a "sibling" relationship, more or less, between the toggler and "togglee".

<li class="has-submenu">
  <a href="#" data-toggle="motion" aria-controls="motion">Why Schmidts</a>
  <ul class="menu submenu vertical" data-submenu id="motion" data-toggler data-animate="fade-in fade-out">
    <li><a>The Company</a></li>
    <li><a>The Team</a></li>
    <li><a>News Blog</a></li>
    <li><a>Video Library</a></li>
    <li><a>Testimonials</a></li>
    <li><a>Showroom</a></li>
  </ul>
</li>
Rafi Benkual over 3 years ago

Hmm, I suspect the issue is something else. Works here if you click the menu: http://codepen.io/rafibomb/pen/QyxKod?editors=1100

Might check to make sure all your paths are set up right. You can test by linking the CDN from the codepen there.

Is this for visual effect or is there another reason to do it this way?

Steven Thate over 3 years ago

Thanks for your reply!

It's nice to know at least, that it is possible. It may help to know that this is a project generated by Yeti Launch. I noticed in my app.scss file it was importing motion-ui, so I'm just assuming that Yeti Launch installed motion-ui.

Yes, this is pretty much just for "aesthetical" reasons.

Rafi Benkual over 3 years ago

Ok, then I know what it is. I'm assuming that you are on an older version, 6.0.3.

You can go into your terminal
cd [whatever your project is called]
go into the bower.json file
update the version number and save

"dependencies": {
    "foundation-sites": "~6.1.2",
    "motion-ui": "~1.1.0"
  },

then run
bower update

You should have 6.1.2 installed and it worked for me!

Steven Thate over 3 years ago

Excellent!

My foundation-sites dependency was 6.0.0. Updating it worked!

Thanks a bunch.

Steven Thate over 3 years ago

I do have one follow-up question that's fairly urgent.

I uploaded my prototype project (just the "built" files: css/, images/, js/, index.html so the client can view it, but the javascript isn't (menu dropdown motion ui) isn't working on the staging server. Is there a special workflow for deploying projects generated by Yeti Launch?