kuliso

0.2.0
Need help reading this?

Pointer

new Pointer(config: PointerConfig)
Parameters
config (PointerConfig)
Example
import { Pointer } from 'kuliso';

const pointer = new Pointer({
    scenes: [...]
});

pointer.start();
Instance Members
▸ start()
▸ pause()
▸ tick()
▸ destroy()
▸ setupEvent()
▸ removeEvent()
▸ setupEffect()
▸ removeEffect()

PointerConfig

PointerConfig

Type: object

Properties
scenes (Array<PointerScene>) : list of effect scenes to perform during pointermove.
root (HTMLElement?) : element to use as hit area for pointermove events. Defaults to entire viewport.
rect ({width: number, height: number}?) : created automatically on Pointer construction.

PointerScene

A configuration object for a scene. Must be provided an effect function.

PointerScene

Type: Object

Properties
effect (PointerEffectCallback) : the effect to perform.
centeredToTarget (boolean?) : whether this scene's progress is centered on the target's center.
target (HTMLElement?) : target element for the effect.
disabled (boolean?) : whether this scene is disabled.
destroy (function?) : a function clean up the scene when it's controller is destroyed.
Example
{ effects: (scene, p) => { animation.currentTime = p.x; } }

PointerEffectCallback

PointerEffectCallback

Type: function (scene: PointerScene, progress: {x: number, y: number}, velocity: {x: number, y: number}): void

Parameters
scene (PointerScene)
progress ({x: number, y: number})
velocity ({x: number, y: number})

Gyro

new Gyro(config: GyroConfig)
Parameters
config (GyroConfig)
Example
import { Gyro } from 'kuliso';

const gyro = new Gyro({
    scenes: [...]
});

gyro.start();
Instance Members
▸ start()
▸ pause()
▸ tick()
▸ destroy()
▸ setupEvent()
▸ removeEvent()
▸ setupEffect()
▸ removeEffect()

GyroConfig

GyroConfig

Type: object

Properties
scenes (Array<GyroScene>) : list of effect scenes to perform on deviceorientation event.
samples (number?) : number of samples to take for initial calibration.
maxBeta (number?) : maximum beta angle.
maxGamma (number?) : maximum gamma angle.

GyroScene

A configuration object for a scene. Must be provided an effect function.

GyroScene

Type: Object

Properties
effect (GyroEffectCallback) : the effect to perform.
disabled (boolean?) : whether this scene is disabled.
destroy (function?) : a function clean up the scene when it's controller is destroyed.
Example
{ effects: (scene, p) => { animation.currentTime = p.x; } }

GyroEffectCallback

GyroEffectCallback

Type: function (scene: GyroScene, progress: {x: number, y: number}, velocity: {x: number, y: number}): void

Parameters
scene (GyroScene)
progress ({x: number, y: number})
velocity ({x: number, y: number})

centerToTargetFactory

Return new progress for {x, y} for the farthest-side formula ("cover").

centerToTargetFactory(target: Object, root: Object, scrollPosition: {x: number, y: number})
Parameters
target (Object)
Name Description
target.left number
target.top number
target.width number
target.height number
root (Object)
Name Description
root.width number
root.height number
scrollPosition ({x: number, y: number})

scrollendCallback

Updates scroll position on scrollend. Used when root is entire viewport and centeredOnTarget=true.

scrollendCallback(tick: any, lastProgress: any)
Parameters
tick (any)
lastProgress (any)

windowResize

Update root rect when root is entire viewport.

windowResize(config: PointerConfig)
Parameters
config (PointerConfig)

observeRootResize

Observe and update root rect when root is an element.

observeRootResize(config: PointerConfig): ResizeObserver
Parameters
config (PointerConfig)
Returns
ResizeObserver:

tick

Mouse controller.

tick

tick

Gyroscope controller.

tick

destroy

Removes all side effects and deletes all objects.

destroy()

destroy

Removes all side effects and deletes all objects.

destroy()