Variable libPresetTransitionsConst

Type declaration

• ~from: {
      defaultConfig: {};
      immutableConfig: {
          commitsStyles: false;
      };
      generateKeyframes(keyframe: Keyframe): {
          forwardFrames: {
              composite?: CompositeOperationOrAuto;
              easing?: string;
              offset?: null | number;
          }[];
      };
  }

  Element transitions from the specified Keyframe to its current state.

  • 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

• ~to: {
      defaultConfig: {};
      immutableConfig: {};
      generateKeyframes(keyframe: Keyframe): {
          forwardFrames: {}[];
      };
  }

  Element transitions from its current state to the specified Keyframe.

  • 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