Interface LibraryPresetTransitionEffects

defaultConfig: {}

immutableConfig: {
    commitsStyles: false;
}

• commitsStyles: false

generateKeyframes:function

• generateKeyframes(keyframe): {
      forwardFrames: {
          composite?: CompositeOperationOrAuto;
          easing?: string;
          offset?: null | number;
      }[];
  }

• Parameters

  • keyframe: Keyframe

    a single Keyframe object dictating the beginning state of the transition

  Returns {
      forwardFrames: {
          composite?: CompositeOperationOrAuto;
          easing?: string;
          offset?: null | number;
      }[];
  }

  • forwardFrames: {
        composite?: CompositeOperationOrAuto;
        easing?: string;
        offset?: null | number;
    }[]

  See

  • Keyframe Formats (way #1)
  • Keyframe Properties

  Example

  const { Transition } = webimator.createAnimationClipFactories();
  
    // get element from DOM and set its styles (just to give some explicit values to look at)
    const square = document.querySelector('.square') as HTMLElement;
    square.style.opacity = '0.5';
    square.style.backgroundColor = 'black';
    square.style.width = '200px';
  
    // A = element, B = effect name, C = effect options, D = configuration (optional)
    
    //                       A       B        C                                                     D
    const clip1 = Transition(square, '~from', [{opacity: '0', backgroundColor: 'red', width: '0'}], {duration: 2000});
    //                       A       B        C                    D
    const clip2 = Transition(square, '~from', [{width: '5000px'}], {duration: 1000});
  
    (async () => {
      // The square instantly becomes invisible (0 opacity), turns red, and has 0 width. Then over 2 seconds, it
      // transitions back to its state before the transition (0.5 opacity, black background, and 200px width).
      await clip1.play();
  
      // The square instantly becomes 5000px. Then over 1 second, it transitions back to 200px width.
      await clip2.play();
    })();
  Copy

defaultConfig: {}

immutableConfig: {}

generateKeyframes:function

• generateKeyframes(keyframe): {
      forwardFrames: {}[];
  }

• Parameters

  • keyframe: Keyframe

    a single Keyframe object dictating the end state of the transition

  Returns {
      forwardFrames: {}[];
  }

  • forwardFrames: {}[]

  See

  • Keyframe Formats (way #1)
  • Keyframe Properties

  Example

  const { Transition } = webimator.createAnimationClipFactories();
  
    // get element from DOM and set its styles (just to give some explicit values to look at)
    const square = document.querySelector('.square') as HTMLElement;
    square.style.opacity = '0.5';
    square.style.backgroundColor = 'black';
    square.style.width = '200px';
  
    // A = element, B = effect name, C = effect options, D = configuration (optional)
    
    //                       A       B      C                                                     D
    const clip1 = Transition(square, '~to', [{opacity: '0', backgroundColor: 'red', width: '0'}], {duration: 2000});
    //                       A       B      C                            D
    const clip2 = Transition(square, '~to', [{opacity: '1', width: '5000px'}], {duration: 1000});
    const clip3 = Transition(square, '~to', [{width: '200px'}], {duration: 0.5, removeInlineStylesOnFinish: true});
  
    (async () => {
      // Over 2 seconds, the square transitions to having 0 opacity, a red background color, and 0 width.
      await clip1.play();
  
      // Over 1 second, the square transitions to have 100% opacity and 5000px width.
      await clip2.play();
  
      // Over 0.5 seconds, the square transitions to having 200px.
      // Because of removeInlineStylesOnFinish, the inline styles related to this clip (i.e., just the width) will be
      // removed from the element in the HTML after the clip finishes. This is reasonable here since the very original
      // width of the square is 200px.
      await clip3.play();
    })();
  Copy