Interface KeyframesGeneratorsGenerator<TClipContext>

OptionalgenerateKeyframes

OptionalgenerateRafMutatorGenerators

OptionalgenerateRafMutators

generateKeyframeGenerators

• generateKeyframeGenerators(...effectOptions): StripDuplicateMethodAutocompletion<{
      backwardGenerator?: (() => Keyframes);
      forwardGenerator: (() => Keyframes);
  }>

• Runs itself exactly once (creating a closure) and returns up to 2 callback functions that each return one set of Keyframes.

  Parameters

  • Rest...effectOptions: unknown[]

    parameters used to set the behavior for the specific animation effect

  Returns StripDuplicateMethodAutocompletion<{
      backwardGenerator?: (() => Keyframes);
      forwardGenerator: (() => Keyframes);
  }>

  An object containing 2 possible callback functions that each generate (return) one set of Keyframes.

  • forwardGenerator will run every time the clip is played
  • backwardGenerator (optional) will run every time the clip is rewound
    • If backwardGenerator is omitted, forwardGenerator will be used, and the resulting keyframes will be reversed

  Example

  const clipFactories = webimator.createAnimationClipFactories({
    customExitEffects: {
      // a custom animation effect for flying out to the left side of the screen
      flyOutLeft: {
        generateKeyframeGenerators() {
          const computeTranslationStr = () => {
            const orthogonalDistance = -(this.domElem.getBoundingClientRect().right);
            const translationString = `${orthogonalDistance}px 0px`;
            return translationString;
          }
    
          return {
            forwardGenerator: () => {
              return [
                {translate: computeTranslationStr()}
              ];
            },
            // backwardGenerator could have been omitted because the result of running forwardGenerator()
            // again and reversing the keyframes produces the same desired rewinding effect in this case
            backwardGenerator: () => {
              return [
                {translate: computeTranslationStr()},
                {translate: `0 0`}
              ];
            }
          };
        },
        
        immutableConfig: {
          // this means that the translation is added onto the element's position instead of replacing it
          composite: 'accumulate',
        }
      },
    }
  });
  
  const element = document.querySelector('.some-element');
  const ext = clipFactories.Exit(element, 'flyOutLeft', []);
  ext.play().then(ext.rewind);
  Copy