konfeti - v0.6.0
    Preparing search index...

    Class KonfetiInstance

    Konfeti Instance. Binds a canvas (or a fullscreen overlay) to its own engine, pool and default options.

    const konfeti = new KonfetiInstance(document.querySelector("canvas"), { maxParticles: 500 });
    await konfeti.fire({ particleCount: 100 });
    konfeti.destroy();
    Index
    constructor
    destroy emit fire getCanvas getParticleCount getQualityLevel isDestroyed isPaused onClick pause reset resume

    • Create Instance.

      Parameters

      • canvas: HTMLCanvasElement | null = null

        Target Canvas (null or omitted creates a fullscreen overlay on first fire())

      • options: CreateOptions = {}

        Instance Options

      Returns KonfetiInstance

    • Destroy Instance. Stops everything, removes listeners and the overlay canvas. The instance cannot fire afterwards.

      Returns void

    • Start a Continuous Emitter. Streams particles at rate per second from what it follows (an element, the pointer or a point) until you call stop(); the particles already out then finish their lives and the handle resolves.

      Parameters

      • options: EmitOptions

        Emitter Options (every fire() setting except particleCount, origin, emission)

      Returns KonfetiEmitter

      Emitter Handle

      TypeError for a missing, zero, negative or non-finite rate (and any invalid fire setting)

      const trail = Konfeti.emit({ rate: 40, follow: "pointer", spread: 360, startVelocity: [50, 150] });
      setTimeout(() => trail.stop(), 3000);
      await trail;

    • Fire Burst (or Several Bursts at Once).

      Parameters

      • input: FireInput = {}

        Burst Options (merged over the instance defaults), or an array of them

      Returns KonfetiHandle

      Awaitable Burst Handle (a combined handle for arrays)

      Error when the instance was destroyed, TypeError on invalid options

    • Return Canvas Element.

      Returns HTMLCanvasElement

      Canvas Element

    • Return Live Particle Count.

      Returns number

      Live Particle Count

    • Return the Adaptive Quality Level. Always 0 without the adaptiveQuality option.

      Returns number

      Level: 0 full quality, 1 CSS resolution, 2 no shadows / shine / trails, 3 fewer particles

    • Return Destroyed State.

      Returns boolean

      Destroyed State

    • Check Whether pause() Is in Effect.

      Returns boolean

      Paused Flag

    • Fire on Every Click. Bursts start at the click position unless the options set their own origin.

      Parameters

      • target: Element | Window

        Element (or window) to Listen On

      • Optionaloptions: FireInput | ((event: MouseEvent) => FireInput)

        Burst Options, or a Function Building Them from the Click Event

      • settings: ClickOptions = {}

        Trigger Event and Burst Callback

      Returns () => void

      Unsubscribe Function

      const off = Konfeti.onClick(document.querySelector("#like")!, { particleCount: 30, spread: 70 });
      off(); // stop listening

    • Pause Everything. Freezes every running burst on its current frame; bursts fired while paused wait as well. Use it when the confetti is not visible, e.g. on an MRAID viewableChange in a playable ad. Hidden tabs already pause automatically.

      Returns void

      mraid.addEventListener("viewableChange", (viewable) => {
        if (viewable) Konfeti.resume();
        else Konfeti.pause();
      });

    • Stop All Bursts and Clear Canvas.

      Returns void

    • Resume After pause(). Continues exactly where the bursts stopped; the paused time does not count as elapsed.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Methods