CODEWITHSUNDEEP
sasszurb-foundationcss-animationszurb-foundation-6motionui
Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Foundation 6 - Using MotionUI Custom Mixins for Animate

I've installed Foundation 6 for Sites using SASS and I'm compiling with Gulp. I'm trying to use the Motion-UI library for some animation effects, and I've got a lot of it working.

Working Demo of Pre-built Animations: http://jsfiddle.net/4a9kux0r/7/

The problem I'm having is trying to use the SASS mixins available for the Motion-UI library to create custom effects.

I have the following in my Gulpfile in order to process it...

var PATHS = {
...
    sass: [
        'bower_components/foundation-sites/scss',
        'bower_components/motion-ui/src/'
    ],
...
};

So, with this in mind, the rest of my .scss files I'm using are set up into partials:

File Hierarchy

and my app.scss file...

@import 'settings';
@import 'foundation';
@import 'motion-ui';
...
@include motion-ui-transitions;
@include motion-ui-animations;
@import 'partials/base';
@import 'partials/typography';
@import 'partials/utilities';
@import 'partials/animations';

So, all said and done, an animation that is pre-built is working fine, such as:

MotionUI.animateOut($('#foo'), 'fade-in');

But if I try to make a custom mixin for it to combine effects, like this SASS I've placed into my _animations.scss partial

.combineAnimate {
  @include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}

Something like this isn't working...

MotionUI.animateOut($('#foo'), 'combineAnimate');

It's probably just something in where I'm defining the custom animation, or not importing something properly, etc. This is my first time using gulp and foundation 6 and I'm still trying to piece it all together, so any help is sincerely appreciated!

Docs: https://github.com/zurb/motion-ui/blob/master/docs/animations.md

It is only compiling into this css code:

.combineAnimate {
  -webkit-animation-name: custom-1;
          animation-name: custom-1; }

@-webkit-keyframes custom-1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-1turn) translateY(120%);
            transform: rotate(-1turn) translateY(120%); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0); } }

@keyframes custom-1 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-1turn) translateY(120%);
            transform: rotate(-1turn) translateY(120%); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0); } }

Upvotes: 0

Views: 659

Answers (1)

Nicholas Hazel
Nicholas Hazel

Reputation: 3740

As stated in the official documentation for Motion-UI plugin:

"Note that in order to play properly, the element must have at least the property animation-duration applied to it as well."

Being new to CSS3 Animations, I had ignored this very bold stated prerequisite. My SASS was compiling just fine.

@include motion-ui-transitions;
.combineAnimate {
  @include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
  animate-duration: 2s;
}

Resolves the issue.

Upvotes: 1

Related Questions