0.4.1
(PointerConfig)
import { Pointer } from 'kuliso';
const pointer = new Pointer({
scenes: [...]
});
pointer.start();
Setup event and effect, and reset progress and frame.
Removes event listener.
Handle animation frame work.
Stop the event and effect, and remove all DOM side effects.
Register to pointermove for triggering update.
Remove pointermove handler.
Reset registered effect.
Remove registered effect.
Type: object
(Array<PointerScene>)
: list of effect scenes to perform during pointermove.
(HTMLElement?)
: element to use as hit area for pointermove events. Defaults to entire viewport.
(boolean?)
: whether to disable throttling the effect by framerate.
(number?)
: duration of transition effect in milliseconds.
(function?)
: easing function for transition effect.
(boolean?)
: whether to track timeline activation events.
(HTMLElement?)
: an alternative source element to attach event handlers and retarget to root.
A configuration object for a scene. Must be provided an effect function.
Type: Object
(PointerEffectCallback)
: the effect to perform.
(boolean?)
: whether this scene's progress is centered on the target's center.
(HTMLElement?)
: target element for the effect.
(boolean?)
: whether this scene is disabled.
(function?)
: a function clean up the scene when it's controller is destroyed.
{ effects: (scene, p) => { animation.currentTime = p.x; } }
Type: function (scene: PointerScene, progress: {x: number, y: number}, velocity: {x: number, y: number}): void
(GyroConfig)
import { Gyro } from 'kuliso';
const gyro = new Gyro({
scenes: [...]
});
gyro.start();
Setup event and effect, and reset progress and frame.
Removes event listener.
Handle animation frame work.
Stop the event and effect, and remove all DOM side-effects.
Register to deviceorientation for triggering update.
Remove deviceorientation handler.
Reset registered effect.
Remove registered effect.
Type: object
A configuration object for a scene. Must be provided an effect function.
Type: Object
(GyroEffectCallback)
: the effect to perform.
(boolean?)
: whether this scene is disabled.
(function?)
: a function clean up the scene when it's controller is destroyed.
{ effects: (scene, p) => { animation.currentTime = p.x; } }
Type: function (scene: GyroScene, progress: {x: number, y: number}, velocity: {x: number, y: number}): void
Return new progress for {x, y} for the farthest-side formula ("cover").
Updates scroll position on scrollend. Used when root is entire viewport and centeredOnTarget=true.
(any)
(any)
Update root rect when root is entire viewport.
(PointerConfig)
Observe and update root rect when root is an element.
(PointerConfig)
ResizeObserver
:
Mouse controller.
Gyroscope controller.
Removes all side effects and deletes all objects.
Removes all side effects and deletes all objects.