FuzzyToggle

About

A toggle with fuzzy state between value [0; 1] from given duration.

Demo

Codepen

Getting started

npm i @kunukn/fuzzytoggle

Usage example

import createToggle from '@kunukn/fuzzytoggle';

let log = console.log;
let onUpdate = ({value:v, motion:m, hasReversed:h}) => { log(v,m,h) };
let onUpdate = ({value:v, motion:m, hasReversed:h}) => { log(v,m,h) };

let fuzzy = createToggle({
    duration: 1000,
    value: 0,
    onUpdate,
    onDone,
});

fuzzy.toggle();
// example: 
// console.log -> 0.2, 'expanding', false

setTimeout(()=>{
    fuzzy.toggle();
// example: 
// console.log -> 0.5, 'collapsing', true
}, 600);

Methods

• toggle
• cancel

Event hooks

• onUpdate
• onDone
• onCancel
• onToggle

Size

ES5 FuzzyToggle.umd.js UMD minified 2.93 kb (gzipped 1.25 kb)