TickTack.js

A microscopic (~0.8Kb) JavaScript helper that translates time into progress. Awesome to animate and to build clocks.

          // Grab a random DOM element
const sec = document.querySelector('.js-sec');
const hour = document.querySelector('.js-hour');

// Adds a callback on every tick (requestAnimationFrame)
ticktack.on('tick', digits => {
  // Digits contains everything you will need to animate a clock
  sec.style.transform = `rotate(${digits.getMinute().progress * 360})`;
})
ticktack.on('minute', digits => {
  hour.style.transform = `rotate(${digits.getHour().progress * 360})`;
});

Installation

To get ticktack.js, either download the latest release and include it in your html window.ticktack, or get it with NPM.

            
  $ npm install ticktack.js --save

Usage

ticktack has a single method on that takes two arguments; eventName as a string and callback as a function. The possible event event names you can register a callback on are: tick, millisecond, second, minute, hour, day, month, year

            // event called on every second
ticktack.on('second', digits => {
  // digits and 'this' contain all the getter functions
  console.log(digits.getSecond().progress);
});

// event called on every request animation frame
ticktack.on('tick', digits => {
  // will be called on requestAnimationFrame
});

Within each callback function you have access to the current value or progress for each Date attribute.

            // lets say this event is called at 6:30:10:100 AM
ticktack.on('second', d => {
  d.getMilliseconds().progress; // => 0.1
  d.getMilliseconds().value;    // => 100

  d.getSecond().progress;       // => 0.16666666667
  d.getSecond().value;          // => 10

  d.getMinute().progress;       // => 0.2
  d.getMinute().value;          // => 30

  d.getHour().progress;         // => 0.5
  d.getHour().value;            // => 6

  d.getDay().progress;          // => 0.2
});

API

Everything you have to know is that you can register as many events as you want, for every date attribute, with the .on() method.

ticktack.on(event, handler)

event Type: String event type: hour, minute, second, millisecond or tick

handler Type: Function( PlainObject digits ) digits object containng getter functions for every digit.

The function called by the .on() method. Has all the functions you need bound to this and the first argument

            {
  'getDay': function(){ ... }, // {value: 0, progress: 0}
  'getHour': function(){ ... }, // {value: 0, progress: 0}
  'getMinute': function(){ ... }, // {value: 0, progress: 0}
  'getSecond': function(){ ... }, // {value: 0, progress: 0}
  'getMillisecond': function(){ ... }, // {value: 0, progress: 0}
  'getDate': function(){ ... }  // js Date
}

Demos