Getting this error when trying simple Motion UI transition- Uncaught ReferenceError: MotionUI is not defined at HTMLAnchorElement.

Question

I'm using the Foundation Zurb Template and I'm having difficulty getting started with the Motion UI library. I am trying to get a simple transition of element working as per these docs:

However, I keep getting the console error:

Uncaught ReferenceError: MotionUI is not defined at HTMLAnchorElement.

The html:

<a class="button" id="button">Toggle Panel</a>

<div class="panel" id="panel">
    <p>Lorem ipsum dolor sit amet!</p>
</div>

app.js:

var $button = $('#button');
var $panel = $('#panel');

$button.click(function() {
  if ($panel.is(':visible')) {
    MotionUI.animateOut($panel, 'fadeOut');
  }
  else {
    MotionUI.animateIn($panel, 'fadeIn');
  }
});

$(document).foundation();

I've also had some success with Motion UI's built in classes, but when I attempt to use custom mixins, this animation will work:

.slide-in-nav {
    @include mui-animation(slide(in, right));
    animation-duration: 0.4s;
}

whereas this transition will not:

.fade-in-nav {
    // A long, long fade
    @include mui-fade(in, $duration: 10s);
}

I'm a little confused as to why these things are happening.