Time tracking with fun animations through CSS Transform

Community feedback

• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  Use min-height:100% on the body. The user can't be seen on mobile devices Its gonna work:)

  Great work there:)

  Marked as helpful

  1

  ---

  

  Daniel Chettiar•140

  @dannyboi07Posted almost 3 years ago

  @Kamasah-Dickson Thank you! I'll try that.

  0
• 

  Kiyoomi•480

  @JukiyoomiPosted almost 3 years ago

  The result is insane ! How did you do the effect with the numbers ?

  1

  ---

  

  Daniel Chettiar•140

  @dannyboi07Posted almost 3 years ago

  @Jukiyoomi You can check my GitHub, time-tracking-dash. The function isn't written by me tho, I took it from stackoverflow and modded it. Tried it myself, got somewhere but just didn't get there, what I missed was obtaining the current value. I just knew the moment I started the layout that I could and had to animate the counter.

  Posted here for convenience.

  }

  function animateValue(id, start, end, duration, option) {
    // assumes integer values for start and end
    
    let obj = document.getElementById(id);
    let range = end - start;
    // no timer shorter than 50ms (not really visible any way)
    let minTimer = 50;
    // calc step time to show all intermediate values
    let stepTime = Math.abs(Math.floor(duration / range));
    
    // never go below minTimer
    stepTime = Math.max(stepTime, minTimer);
    
    // get current time and calculate desired end time
    let startTime = new Date().getTime();
    let endTime = startTime + duration;
    let timer;
  
    function run() {
        let now = new Date().getTime();
        let remaining = Math.max((endTime - now) / duration, 0);
        let value = Math.round(end - (remaining * range));
        if (id.includes("daytime")) obj.textContent = `${option}${value}hrs`
        else obj.textContent = `${value}hrs`;
        if (value == end) {
            clearInterval(timer);
        }
    }
    
    timer = setInterval(run, stepTime);
    run();
  }```
  

  0