Function createCustomEffectComposer

createCustomEffectComposer<TCategory, TEffectComposer>(effectCategory, effectComposer): TEffectComposer

Allows the convenient creation of an object in the shape of an EffectComposer with full auto-completion. The resulting effect composer must be passed into webchalk.createAnimationClipFactories in order to be added to the preset effects registry.

Type Parameters

TCategory extends
    | "Entrance"
    | "Exit"
    | "Emphasis"
    | "Motion"
TEffectComposer extends Readonly<StripDuplicateMethodAutocompletion<{
    defaultConfig?: Partial<Layer3MutableClipConfig<CategoryToClipType<TCategory>>>;
    effectCompositionFrequency?: "on-first-play-only" | "on-every-play";
    immutableConfig?: Partial<Layer3MutableClipConfig<CategoryToClipType<TCategory>>>;
    composeEffect(...effectOptions: unknown[]): StripDuplicateMethodAutocompletion<{
        backwardKeyframesGenerator?: (() => Keyframes);
        backwardMutatorGenerator?: (() => Mutator);
        forwardKeyframesGenerator?: (() => Keyframes);
        forwardMutatorGenerator?: (() => Mutator);
        reverseKeyframesEffect?: boolean;
        reverseMutatorEffect?: boolean;
    }>;
}>>

Parameters

effectCategory: TCategory
the category of the animation effect
effectComposer: TEffectComposer
the effect composer object, where you will define EffectComposer.composeEffect among other properties

Returns TEffectComposer

The same effectComposer object you passed into the function.

Remarks

This function is purely for convenience. You could create EffectComposer objects on your own without it, but there would be no autocompletion or hinting. Besides using this function or createCustomEffectComposerBank, the other way to contstruct effect composers while still having access to Intellisense is to define them directly within the call to webchalk.createAnimationClipFactories.

Example

// CREATE CUSTOM EFFECT COMPOSERS

const zoomIn = createCustomEffectComposer(
  'Entrance',
  {
    composeEffect(initialScale: number) {
      // return ComposedEffect
      return {
        forwardKeyframesGenerator: () => {
          // return Keyframes (Keyframe[])
          return [
            {scale: initialScale, opacity: 0},
            {}
          ];
        },
      };
    }
  }
);

const fadeIn = createCustomEffectComposer(
  'Entrance',
  {
    composeEffect() {
      return {
        forwardKeyframesGenerator: () => {
          return [{opacity: 0}, {}];
        }
      };
    },
    defaultConfig: { duration: 1000, easing: 'ease-in' },
  }
);

const flyOutLeft = createCustomEffectComposer(
  'Exit',
  {
    composeEffect() {
      const computeTranslationStr = () => {
        const orthogonalDistance = -(this.domElem.getBoundingClientRect().right);
        const translationString = `${orthogonalDistance}px 0px`;
        return translationString;
      }

      // return ComposedEffect
      return {
        forwardKeyframesGenerator: () => {
          // return Keyframes (Keyframe[])
          return [
            {translate: computeTranslationStr()}
          ];
        },
      };
    },
    defaultConfig: {
      duration: 1000,
      easing: "ease-in",
    },
    immutableConfig: {
      composite: 'accumulate',
    },
  }
);

// CREATE CLIP FACTORIES AND PASS IN CUSTOM EFFECT COMPOSERS
const clipFactories = webchalk.createAnimationClipFactories({
  customEntranceEffects: {
    zoomIn,
    fadeIn,
  },
  customExitEffects: {
    flyOutLeft
  }
});

const square = document.querySelector('.square');

// your custom effects are now part of the presets (along with full Intellisense)
const ent1 = clipFactories.Entrance(square, 'zoomIn', [0.1]);
const ent2 = clipFactories.Entrance(square, 'fadeIn', []);
const ext2 = clipFactories.Exit(square, 'flyOutLeft', []);