Take control of your CSS keyframe animations

jogwheel API

constructor

Creates a new jogwheel instance

Parameters

• nodes Node or NodeList Node or NodeList to instantiate on
• options object Options object
• window [Window] Global context to use (optional, default global.window)
• document [Document] Document context to use (optional, default global.window)

Examples

import jogwheel from 'jogwheel';
const element = document.querySelector('[data-animated]');

// Instantiate a jogwheel instance on element
const wheel = new jogwheel(element);

Returns jogwheel jogwheel instance

durations

Returns array durations used by jogwheel instance

pause

Pauses the animation

Examples

import jogwheel from 'jogwheel';
const element = document.querySelector('[data-animated]');

// Instantiate a paused jogwheel instance on element
const wheel = jogwheel.create(element, {
	paused: false
});

// Pause the animation and reset it to animation start
wheel.pause().seek(0);

Returns jogwheel jogwheel instance

play

Plays the animation

Examples

import jogwheel from 'jogwheel';
const element = document.querySelector('[data-animated]');

// Instantiate a paused jogwheel instance on element
const wheel = jogwheel.create(element, {
	paused: true
});

// Seek to middle of animation sequence and play
wheel.seek(0.5).play();

Returns jogwheel jogwheel instance

players

Returns array WebAnimationPlayer instances by jogwheel instance

playState

Returns string playState, either running or paused

progress

Returns float progress in fraction of 1 [0..1]

seek

Seeks the timeline of the animation

Parameters

• progress float fraction of the animation timeline [0..1]

Examples

import jogwheel from 'jogwheel';
const element = document.querySelector('[data-animated]');

// Instantiate a paused jogwheel instance on element
const wheel = jogwheel.create(element, {
	paused: true
});

// Keep track of scroll position
let scrollTop = document.scrollTop;
document.addEventListener('scroll', () => scrollTop = document.scrollTop);

// Seek the animation [0..1] for scroll position of [0..300]
function loop() {
	const fraction = Math.max((300 / scrollTop) - 1, 0);
	wheel.seek(fraction);
	window.requestAnimationFrame(loop);
}

// Start the render loop
loop();

Returns jogwheel jogwheel instance

create

Creates a new jogwheel instance

Parameters

• element HTMLElement HTMLElement to instantiate on
• options object Options object
• window [Window] Global context to use (optional, default global.window)
• document [Document] Document context to use (optional, default global.window)
• args ...

Examples

import jogwheel from 'jogwheel';
const element = document.querySelector('[data-animated]');

// Instantiate a paused jogwheel instance on element
const wheel = jogwheel.create(element, {
	paused: true
});

// Seek to middle of animation sequence
wheel.seek(0.5);

// Play the animation
wheel.play();

Returns jogwheel jogwheel instance

jogwheel v1.3.0 is built by Mario Nebl and contributors with :heart: and released under the MIT License.