Events

React to camera switches and blends.

Every camera transition is reported as an event.

Event	Payload	Fires when
`activated`	`{ incoming, outgoing }`	A camera becomes the winner.
`deactivated`	`{ outgoing }`	A camera has fully left the screen.
`blendCreated`	`{ incoming, outgoing }`	A blend starts.
`blendFinished`	`{ incoming }`	A blend ends and `incoming` is fully on screen.
`cut`	`{ incoming, outgoing }`	A switch happens instantly, without a blend.

incoming and outgoing are camera names. outgoing is null for the very first camera.

A cut happens for the first camera ever shown, and for any blend with time: 0. A time: 0 switch fires blendCreated too, but never blendFinished.

Filtering per camera

Klipp hears every transition. A camera hears only the ones it is part of:

Event	Passed on when this camera is
`activated`, `blendFinished`	`incoming`
`deactivated`	`outgoing`
`blendCreated`, `cut`	`incoming` or `outgoing`

Usage

klipp.addEventListener('activated', (e) => console.log(`${e.outgoing} -> ${e.incoming}`));

const follow = new VirtualCamera('follow', { priority: 10 });
klipp.add(follow);
follow.addEventListener('deactivated', () => console.log('follow is off screen'));

klipp.addEventListener('activated', (e) => console.log(`${e.outgoing} -> ${e.incoming}`));

const follow = new VirtualCameraThree('follow', { priority: 10 });
klipp.add(follow);
follow.addEventListener('deactivated', () => console.log('follow is off screen'));

<Klipp.Events> hears every transition, and <VirtualCamera.Events> only its own camera's. Event names become props: onActivated, onDeactivated, onBlendCreated, onBlendFinished and onCut.

<Klipp>
  <Klipp.Events onActivated={(e) => console.log(`${e.outgoing} -> ${e.incoming}`)} />

  <VirtualCamera name="follow" priority={10}>
    <Body.Follow target={playerRef} />
    <VirtualCamera.Events onDeactivated={() => console.log('follow is off screen')} />
  </VirtualCamera>
</Klipp>

A <VirtualCamera>'s ref is the camera, and has addEventListener too.

Edit this page