When I add data-animate and the appropriate animation names, there is no animation. I want the links to slide down and then slide up. I have motion ui class enabled in the .scss.

Its added as per the Foundation documentation. Why isnt it working? What do I need to change?

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="none">
   <button class="menu-icon" type="button" data-toggle></button>
   <div class="title-bar-title">Page Nav</div>
</div>
<div class="page-links row expanded" id="main-menu" data-animate="slide-in-down slide-out-up">
   <div class="link-row">
     <a href="#example" class="link">General</a>
     <a href="#example" class="link">General</a>
     <a href="#example" class="link">General</a>
   </div>      
</div>

Thanks!