Guide

Pipeline Functions

Using a pipeline function lets you apply a processing function to all animations (on a global basis). For example, consider if you find yourself repeating kf-loop on all your animations because you want every animation on your site to loop indefinitely.

There are two ways of doing this. You could either specify kf-loop around each animation, individually, or alternatively you could set the kf-pipeline to be kf-loop to apply this processing globally. As such the below two blocks are equivalent:

// Without a pipeline-function @include kf-loop(kf-reverse($animation-map-a)); @include kf-loop(kf-stretch(0.5, $animation-map-b)); @include kf-loop($animation-map-c); // With a pipeline function @include kf-pipeline(kf-loop); @include kf-reverse($animation-map-a); @include kf-stretch(0.5, $animation-map-a); @include kf($animation-map-b);

Custom Pipeline Functions

While any Kf mixin can be used as a pipeline function, you can also use custom Sass functions with kf-pipeline as well. For example to play all animations at half speed and then subsequently full speed:

@function half-and-then-full-speed($kf-map) { @return kf-chain( kf-stretch($kf-map, 0.5), $kf-map ); } @include kf-pipeline(half-and-then-full-speed);