Menu icon Foundation
on open page motion-ui with scss

I don't understand how to autostart motion-ui transitions when the page are loaded.

It's work when i use button like this but its not what i want.

<button type="button" class="button" data-toggle="motion-example-1">Fade</button>

         

motion-uijavascript

I don't understand how to autostart motion-ui transitions when the page are loaded.

It's work when i use button like this but its not what i want.

<button type="button" class="button" data-toggle="motion-example-1">Fade</button>

         
Geoff Kimball almost 4 years ago

If you want it to fade in instantly, you can write a fade animation. This SCSS and HTML will make the button fade in once, on page load.

@import 'motion-ui';

.animate-fade {
  @include mui-animation(fade);
}
<button type="button" class="button animate-fade">Fade</button>

Zacharie Roy almost 4 years ago

ok
I will test this soon.
if i understand to make animation after the page load of div i simply need to do this :

@import 'motion-ui';

.my-slide {
@include mui-animation(slide-in-right);
}

<div class="my-slide">the content of my slide</div>

Now i understand i can use slide($state, $direction, $amount)
but if i want to change Easing to Bounce

Zacharie Roy almost 4 years ago

I have add this code at the end of src/assets/scss/app.scss
.animate-spin {
@include mui-animation(spin);
}

i execute glup .. its realy read src/assets/scss/app.scss because if make error glup see this.

but the dist/assets/css/app.css created by glup dont have trace of animate-spin.

I dont understand what is the problem