Type alias PowerGlitchOptions

Type declaration

• optimizeSeo: boolean

  Whether to avoid running the glitch effect on crawlers for SEO optimization.

• Optional html?: string

  Html to glitch. If not provided, will use the elements themselves. If provided, all elements should have an innerHTML property.

• createContainers: boolean

  Whether to create the 2 containers (one containing the other) necessary to create the glitch animation (defaults to true).

  Remarks

  The glitch effect relies on cloning the glitched element, and stacking them on top of the others inside 2 containers (one containing the other). The embedded container is called the layer container, it has grid display and stacks its children, which are the original element and its cloned versions. The top-level container replaces the original element (and the element is moved inside the layer container) This logic is necessary to ensure layout consistency before/after the glitch, and to create the actual glitch effect with CSS. In short, this maximizes compatibility for gitching about anything, but has to rearrange the DOM for that purpose.

  In some cases, it is better to handle this logic of two containers elsewhere than in PowerGlitch. For that, this flag should be false, which will make PowerGlitch.giltch(..) assume:

  • That the first argument to glitch(..) is the layer container itself
  • That the first child of the layer container is the element to glitch And will:
  • Clone the element to glitch the required amount of times, and add the clones at the same level than the element to glitch in the layer container

• playMode: PlayModes

  While you can control the glitch with the startGlitch/stopGlitch methods, You can also set a default behavior for playing the glitch.

• hideOverflow: boolean

  Whether to hide the glitch animation when it goes out of the bounding rectangle.

• timing: {
      duration: number;
      iterations: number;
      easing?: string;
  }

  Timing of the animation.

  • duration: number

    Duration of the animation loop in milliseconds.

  • iterations: number

    Number of times the animation should repeat. Set to Infinity to repeat forever.

  • Optional easing?: string

    Ease animation for all layers. Defauls to a sequential easing (no transition).

• glitchTimeSpan: false | {
      start: number;
      end: number;
  }

  Specify if the animation should always glitch uniformly (if false) or if it should glitch at a given time.

  Remarks

  If start and end are set, the animation will glitch between those two times, and the peak glitch will be at the middle. glitchTimeSpan.end should be greater than glitchTimeSpan.start. Otherwise, the glitch will not happen.

• shake: false | {
      velocity: number;
      amplitudeX: number;
      amplitudeY: number;
  }

  Whether the base layer should shake. If not set to false, the base layer will shake in the given amplitude.

  Remarks

  The shake animation respects the glitch time span constraint, if set.

• slice: {
      count: number;
      velocity: number;
      minHeight: number;
      maxHeight: number;
      hueRotate: boolean;
  }

  Slice layers are the base animation to give the glitch effect. They clip a part of the element and move it somewhere else.

  Remarks

  The slice animation respects the glitch time span constraint, if set.

  • count: number

    Number of layers to generate.

  • velocity: number

    Number of steps to compute for each layer per second of animation.

  • minHeight: number

    Minimum height in percent for a given slice, between 0 and 1.

  • maxHeight: number

    Maximum height in percent for a given slice, between 0 and 1.

  • hueRotate: boolean

    Whether the hue should rotate for the given slice.

• pulse: false | {
      scale: number;
  }

  Pulse layer adds a pulsing effect to the glitch.