A toggle with fuzzy state between value [0; 1]
from given duration.
npm i @kunukn/fuzzytoggle
import createToggle from '@kunukn/fuzzytoggle';
function log(){ console.log(...arguments) };
let onUpdate = ({value:v, motion:m}) => { log('upd:',v,m) };
let onDone = ({value:v, motion:m, hasReversed:h}) => { log('done:',v,m,h) };
let fuzzy = createToggle({
duration: 1000,
value: 0, // 0 or 1
onUpdate,
onDone,
});
fuzzy.toggle();
// example:
// console.log -> upd: 0.2 'expanding'
setTimeout(()=>{
fuzzy.toggle();
// example:
// console.log -> upd: 0.5 'collapsing'
}, 600);
// console.log -> done: 0 'collapsed' true
toggle
reverses the toggle direction until value 0 or 1cancel
cancels and stops current toggle direction
- onUpdate:
({value, motion}) => { /* your code */ }
- onDone:
({value, motion, hasReversed}) => { /* your code */ }
- onCancel:
({value, motion, hasReversed}) => { /* your code */ }
- onToggle:
({value, motion, hasReversed}) => { /* your code */ }
ES5 FuzzyToggle.umd.js
UMD minified 2.93 kb (gzipped 1.25 kb)