Menu icon Foundation
motion-ui hinge mixins

I'm trying to customize the "hinge" motion in my scss. But haven't got it to work. The reveal simply pops on and off.

In my foundation.scss file is the following
@import 'motion-ui';
// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations; `

And in my custom settings I have
.hinge-in-from-top{
@include mui-hinge(in, $duration, 1s );
}

.hinge-out-from-bottom{
@include mui-hinge(out, $duration, 2s);
}

My markup is
< a data-toggle="myModal" data-animate="hinge-in-from-top hinge-out-from-bottom">image< /a>


< div class="medium reveal" id="myModal" data-reveal>
< p>content goes here< /p>
< button class="close-button" data-close aria-label="Close reveal" type="button">
< span aria-hidden="true">×< /span>
< /button>
< /div>

motion-uihingedata-reveal

I'm trying to customize the "hinge" motion in my scss. But haven't got it to work. The reveal simply pops on and off.

In my foundation.scss file is the following
@import 'motion-ui';
// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations; `

And in my custom settings I have
.hinge-in-from-top{
@include mui-hinge(in, $duration, 1s );
}

.hinge-out-from-bottom{
@include mui-hinge(out, $duration, 2s);
}

My markup is
< a data-toggle="myModal" data-animate="hinge-in-from-top hinge-out-from-bottom">image< /a>


< div class="medium reveal" id="myModal" data-reveal>
< p>content goes here< /p>
< button class="close-button" data-close aria-label="Close reveal" type="button">
< span aria-hidden="true">×< /span>
< /button>
< /div>

Rafi Benkual over 3 years ago

Are you using the Foundation ZURB stack? If so:

I think the imports should be

@import 'foundation';
@import 'motion-ui';

The markup looks like

<div class="reveal" id="animatedModal1" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">

If not, these instructions will help:
http://zurb.com/university/lessons/create-custom-animations-and-transitions-with-motion-ui