Menu icon Foundation
Orbit Motion UI EaseInOut

Any reason easing may not work when applied to Orbit? Applying the following, all parameters test fine except timing, no easing applied to the image transitions.

.orbit-slide-in-right {
	@include mui-slide($state:in,$direction:left,$amount:100%,$fade:true,$duration:0.6s,$timing:EaseInOut,$delay:null);
}

Orbitmotionuieasingtiming

Any reason easing may not work when applied to Orbit? Applying the following, all parameters test fine except timing, no easing applied to the image transitions.

.orbit-slide-in-right {
	@include mui-slide($state:in,$direction:left,$amount:100%,$fade:true,$duration:0.6s,$timing:EaseInOut,$delay:null);
}
Rafi Benkual 2 months ago

Have you instead tried passing in the animation through the data attribute? It works well for me

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">

Paul Summers 2 months ago

Well yes but there is no ease via those standard transitions? Currently state the class, e.g. data-options="animInFromLeft:orbit-slide-in-right but as i say, the $timing value is ignored.