firmin icon indicating copy to clipboard operation
firmin copied to clipboard

Keyframe support

Open cscott opened this issue 12 years ago • 0 comments

It would be nice if firmin supported triggering css keyframe animations.

The syntax might look like:

/* Simple invocation */
Firmin.animate(box, {
    name: pulse
}, 0.5);
/* Chaining */
Firmin.animate(box, { name: pulse }, 0.5)
      .animate({ rotate: "45deg" }, 1)
      .animate({ name: slideoff }, 2);

Of course, for chaining to work, firmin would have to know the transform associated with the end state of the animation, so it would probably also need syntax for defining the keyframes:

Firmin.keyframe('pulse', { opacity: 1 }) /* 'from' state (not optional) */
      .animate({ opacity: 0, keyframe: 50 /* percent */})
      .animate({ opacity: 1 }); /* 'to' state (not optional) */

Missing 'keyframe' properties default to 0 (for the 'keyframe' method) or 100 (for chained 'animate' methods).

cscott avatar May 06 '12 06:05 cscott