Interface RafMutatorsGenerator<TClipContext>

OptionalgenerateKeyframeGenerators

OptionalgenerateKeyframes

OptionalgenerateRafMutatorGenerators

generateRafMutators

• generateRafMutators(...effectOptions): StripDuplicateMethodAutocompletion<{
      backwardMutator: (() => void);
      forwardMutator: (() => void);
  }>

• Runs every time the clip is played, returning 2 functions each time. These functions are run every frame (using requestAnimationFrame behind the scenes), so if a property of the animated element is changed using AnimClip.computeTween, it will look like a smooth animation.

  Parameters

  • Rest...effectOptions: unknown[]

    parameters used to set the behavior for the specific animation effect

  Returns StripDuplicateMethodAutocompletion<{
      backwardMutator: (() => void);
      forwardMutator: (() => void);
  }>

  An object containing 2 functions.

  • forwardMutator is used for the clip's animation when the clip is played
  • backwardKeyframes is used for the clip's animation when the clip is rewound

  See

  AnimClip.computeTween

  Example

  const clipFactories = webimator.createAnimationClipFactories({
    customMotionEffects: {
      // a custom animation for scrolling to a specific position (but when
      // rewinding, it will snap to yPosition before scrolling to the initial position, which
      // may feel janky. This could be solved with generateRafMutatorGenerators())
      scrollTo: {
        generateRafMutators(yPosition: number) {
          const initialPosition = this.domElem.scrollTop;
    
          return {
            forwardMutator: () => {
              this.domElem.scrollTo({
                top: this.computeTween(initialPosition, yPosition),
                behavior: 'instant'
              });
            },
            backwardMutator: () => {
              this.domElem.scrollTo({
                top: this.computeTween(yPosition, initialPosition),
                behavior: 'instant'
              });
            }
          };
        }
      },
    }
  });
  
  const element = document.querySelector('.some-element');
  const mot = clipFactories.Motion(element, 'scrollTo', [1020]);
  mot.play().then(mot.rewind);
  Copy