Menu icon Foundation
Data-animate not working

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!

Motion UIfoundation 6animate

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!

RCD almost 3 years ago

Anyone else having an issue with data-animate as shown in the Foundation Docs?

giovanni rivera 8 months ago

If I'm correct your are missing to identified the toggle, like so data-toggle="main-menu"