Skip to content

alex-skakun/dynamic-value

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dynamic value

A small lib that provides custom class DynamicValue, subclass of Number.

Methods

  • static DynamicValue.tick() - triggers calculations for all instances of DynamicValue
  • transitionTo(number) - enables transition change from current value to passed.
  • reset(number?) - resets value to initial or specified value. Doesn't start transition.
  • current() - returns current value. Returns different values during transition.

Usage

import { DynamicValue } from 'dynamic-value';
import { animationFrameCycle } from './renderUtils';


let squareEl = document.getElementById('square');
let startValue = 100;
let endValue = 200;
let transitionDurationMs = 300;
let cubicBezierString = '.07,.85,.18,.99';
let scaling = false;

let dynamicValue = new DynamicValue(startValue, transitionDurationMs, cubicBezierString);

squareEl.addEventListener('click', () => {
  if (scaling) {
    dynamicValue.transitionTo(startValue);
    scaling = false;
  } else {
    dynamicValue.transitionTo(endValue);
    scaling = true;
  }
});

animationFrameCycle(() => {
  // triggers calculations for all instances of DynamicValue
  DynamicValue.tick();
  // function that reads current value of DynamicValue instance
  render();
});

function render () {
  squareEl.style.height = `${dynamicValue}px`;
  squareEl.style.width = `${dynamicValue}px`;
}

Preview

License

MIT

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published