kuliso

0.4.7
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()
▸ transition()
▸ 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.
noThrottle (boolean?) : whether to disable throttling the effect by framerate.
transitionDuration (number?) : duration of transition effect in milliseconds.
transitionEasing (function?) : easing function for transition effect.
allowActiveEvent (boolean?) : whether to track timeline activation events.
eventSource (HTMLElement?) : an alternative source element to attach event handlers and retarget to root.

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()

testPointerOffsetDprBug

testPointerOffsetDprBug()
Related
https://issues.chromium.org/issues/40887601?pli=1

getScrollOffsetsForWebKitPointerBug

getScrollOffsetsForWebKitPointerBug()
Related
https://bugs.webkit.org/show_bug.cgi?id=287799