Menu icon Foundation
Foundation 6 Motion UI - Set Duration and Timing

When using the Motion UI library (eg: data-animate="slide-in-down slide-out-up"), is it possible to control the animation duration and/or easing/timing with additional options/data attributes?
That is, from within the mark-up, NOT via custom created animation with mixins, etc...

It would be good to simply be able to adjust the duration without having to create a whole new custom animation, or change the easing, or both.

Is this currently possible via the mark-up or can we easily override some CSS properties?

Motion UIfoundation 6sitesanimation

When using the Motion UI library (eg: data-animate="slide-in-down slide-out-up"), is it possible to control the animation duration and/or easing/timing with additional options/data attributes?
That is, from within the mark-up, NOT via custom created animation with mixins, etc...

It would be good to simply be able to adjust the duration without having to create a whole new custom animation, or change the easing, or both.

Is this currently possible via the mark-up or can we easily override some CSS properties?

Rafi Benkual almost 4 years ago

You can add classes to the element to modify those: https://github.com/zurb/motion-ui/blob/master/docs/classes.md#modifier-classes

Example

<div id="panel" data-animate="slideInRight" class="slow bounceIn"></div>

Val Ery almost 4 years ago

Hi Rafi!

The difference between the default value and slow is not. Anyway, my opinion does not see the difference in the duration of the animation in the 500 ms and 750 ms. It appears that class "slow" is useless.

I think that the setting for "slow" 1500 ms will be optimal (default for Motion UI).

P.S. I am referring to predefined values rather than the ones that we can "set the hands."
1/4 of a second - just do not understand whether it is the animation duration, or browser bugs.