How to use Animation Classes

[ochorocho]

Hey,

i'm trying to use Animation Classes. But i can't make it work.
I tried to add classes like "shake" or "wiggle" to animate an element which did nothing.
Even using JS did not work:

// Does not work
MotionUI.animateIn(content, 'wiggle');
// Works
MotionUI.animateIn(content, 'fadeIn');
MotionUI.animateIn(content, 'slow bounceInOut slideInRight');

Don't know if i got it right but i thought i can simply animate any element by adding a class.

How do i use Animation Classes in the right manner?

[gakimball]

animateIn and animateOut only apply transitions. To apply an animation, use jQuery's addClass:

$('#element').addClass('wiggle');

I think we can add a method to do this for you, and also give you a callback that fires when the animation is finished, so it can do cleanup work and such.

As for the modifier classes (.slow, .bounceInOut) and so on, apply those as classes on the element, not in the animateIn/out functions.

[gakimball]

See: #40

[ochorocho]

Adding the method would be great.

i tried $('#element').addClass('wiggle');, it adds the class to the element but i cant see any animation.

Required css is there:

.wiggle {
  -webkit-animation-name: "wiggle-7deg";
          animation-name: "wiggle-7deg";
}

@-webkit-keyframes wiggle-7deg {
  "40%, 50%, 60%" {
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
  "35%, 45%, 55%, 65%" {
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
  "0%, 30%, 70%, 100%" {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes wiggle-7deg {
  "40%, 50%, 60%" {
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
  "35%, 45%, 55%, 65%" {
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
  "0%, 30%, 70%, 100%" {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

[gakimball]

Oh, that's a bug with the framework; the CSS output isn't quite right. I'm going to get a patch out today if possible that addresses it.

[ochorocho]

OK... thanks a bunch!

[gakimball]

Just published 1.0.1 which addresses these issues. Basically the value of animation-name should not be quoted, nor should the percentage values used in keyframes. Pull requests #26 and #28 fixed this.

As for the API changes, we'll track that here: #40

[jurerick]

I downloaded now the motion UI using bower, but still not working. even a simple .wiggle class.

I think we need to specify the animation duration property to make it work.

-webkit-animation-duration: 5s

[ochorocho]

@jurerick, i have the same issue still.
i expected motionUi to animate the element when i drop in a class... but it still does not work for me, even when using the latest version. :-/

[jurerick]

@ochorocho , I got it working by adding animation duration to the element class

.myelement{
   -webkit-animation-duration: 5s
}

OR
adding the transition duration (.slow, .fast, .linear, etc...) classes available from the motion-ui.css.

Example:

<div class="myelement wiggle slow">My Element</div>

[ochorocho]

@jurerick thanks... works now!

[gakimball]

I added a note to the docs that animation-duration must be used in tandem with mui-animate: 040b2f9