Guide

Using Mixins

Keyfram's selection of mixins can be used in two ways. The first way is as a top-level include statement. And the second way is as the input for another mixin's animation map.

Using a mixin normally:

The first way you can use a Keyfram mixin is with a traditional @include statement. Read the documentation for each mixin to find out the parameters for each.

Say for example, if you want to play an animation map in reverse you could use the kf-reverse mixin as:

.using-mixins-at-the-top-level {
  $animation-map: ('div': (margin-left: (
    0ms: 0%, 
    2s: 100%
  )));

  @include kf-reverse($animation-map);
}

.using-mixins-at-the-top-level {
  height: 20px;
  position: relative;

  div {
    $s: 20px;
    position: absolute;
    width: $s;
    height: $s;
    border: 1px solid #000000;
  }
}

<div class='using-mixins-at-the-top-level'>
  <div></div>
</div>

Edit

Using mixin composability (e.g. mixins as functions):

The second way you can use a Keyfram mixin is as a function. When a Keyfram mixin is used as a function, its result is a animation map which is compatible as the input animation map for any other Keyfram mixin.

For example say you wanted to play the animation in the previous example first normally, and then in reverse at half speed, you could write simply:

.using-mixins-nested {
  $animation-map: ('div': (margin-left: (
    0ms: 0%, 
    2000ms: 100%
  )));
  
  @include kf-chain(
    $animation-map,
    kf-stretch(
      1000ms,
      kf-reverse($animation-map)
    )
  );
}

.using-mixins-nested {
  height: 20px;
  position: relative;

  div {
    $s: 20px;
    position: absolute;
    width: $s;
    height: $s;
    border: 1px solid #000000;
  }
}

<div class='using-mixins-nested'>
  <div></div>
</div>

Edit

Animation Maps

Easing Animations