Menu icon Foundation
Passing Magellan animationEasing value to data-options

While I was trying to change the animation easing of a magellan nav, I used the data-options to pass a value to the animationEasing attribute. However, it doesn't seem to register anything except 'linear' or 'swing'. The example value of 'ease-in-out' in the docs or any other value from http://api.jqueryui.com/easings/ besides 'linear' and 'swing' breaks the magellan. So if you want to add some easing to your magellan movements add these options:

<nav id="sample_nav" data-magellan data-options="animationEasing:swing; animationDuration:750">
  <ul class="menu vertical">
    <li><a href="#first"><span class="badge">1</span></a></li>
    <li><a href="#second"><span class="badge">2</span></a></li>
    <li><a href="#third"><span class="badge">3</span></a></li>
  </ul>
</nav>

Magellaneasingjsdata-options

While I was trying to change the animation easing of a magellan nav, I used the data-options to pass a value to the animationEasing attribute. However, it doesn't seem to register anything except 'linear' or 'swing'. The example value of 'ease-in-out' in the docs or any other value from http://api.jqueryui.com/easings/ besides 'linear' and 'swing' breaks the magellan. So if you want to add some easing to your magellan movements add these options:

<nav id="sample_nav" data-magellan data-options="animationEasing:swing; animationDuration:750">
  <ul class="menu vertical">
    <li><a href="#first"><span class="badge">1</span></a></li>
    <li><a href="#second"><span class="badge">2</span></a></li>
    <li><a href="#third"><span class="badge">3</span></a></li>
  </ul>
</nav>
Mario Giancini almost 4 years ago

@Rafi Benkual I'll definitely look into helping after Christmas.

Rafi Benkual almost 4 years ago

Hi Mario - Thanks for posting this helpful tip! Do you think this is something that should be documented? Are you able to help with that by submitting a Pull Request?

Erik Wartenberg almost 3 years ago

hey mario,

had the same problem a couple of days ago...

if you're currently looking for a solution:

for me the jquery easing plugin worked! (http://gsgd.co.uk/sandbox/jquery/easing/)

best regards

-erik

 

 

Jason Froderman over 3 years ago

@Rafi, is this something that is still the case for Foundation 6? I didn't find a list of available easing options.

More than willing to help add something doc wise. Would like to figure out the best way to switch out easing and could document that to if you could point me in the right direction.