measureTarget()

function measureTarget(
    target: EffectTarget,
    canvas?: HTMLCanvasElement,
): MeasuredTarget;

Turns an element or a point into an origin and an emission area for createEffect(). Use it to make a custom effect burst out of an element.

The target is measured once, when this function is called. Moving or scrolling afterwards does not move the effect.

Parameters

targetEffectTarget

An element, or a point in page coordinates.

canvasoptionalHTMLCanvasElement

The canvas the effect draws onto, if it doesn’t use the default fullscreen canvas. The origin is then measured from the canvas’ top-left corner, as CreateEffectOptions.canvas expects.

Returns

MeasuredTarget

The origin, and the area for emitFrom().

Throws

PartyJSError

If called outside a browser, for example during server-side rendering.

Example

const { origin, area } = measureTarget(button);

createEffect({
    origin,
    schedule: { bursts: [{ count: 30 }] },
    particleInit: {
        position: emitFrom(area),
        // ...
    },
});