timer

file.html

<div class="clock"
     data-finish-year="2021"
     data-finish-month="07"
     data-finish-day="12"
     data-finish-hour="0"
     data-finish-minutes="0"
     data-finish-seconds="0"
>
    <div class="num -d">
        00
    </div>
    <span class="sep">:</span>
    <div class="num -h">
        00
    </div>
    <span class="sep">:</span>
    <div class="num -m">
        00
    </div>
    <span class="sep">:</span>
    <div class="num -s">
        00
    </div>
</div>

timer.js

import Timer from "easytimer.js"
import gsap  from "gsap"

function toTimestamp(year, month, day, hour, minute, second) {
    let datum = new Date(year, month - 1, day, hour, minute, second);
    return datum.getTime();
}

const today = new Date().getTime()

const year    = document.querySelector('.clock').getAttribute('data-finish-year')
const month   = document.querySelector('.clock').getAttribute('data-finish-month')
const day     = document.querySelector('.clock').getAttribute('data-finish-day')
const hour    = document.querySelector('.clock').getAttribute('data-finish-hour')
const minutes = document.querySelector('.clock').getAttribute('data-finish-minutes')
const seconds = document.querySelector('.clock').getAttribute('data-finish-seconds')

const finishDay = toTimestamp(year, month, day, hour, minutes, seconds)

console.log('today ' + today)
console.log('finish ' + finishDay)

let totalSeconds
if (today > finishDay) {
    gsap.to(".clock", {
        duration: 1,
        height  : 0,
        overflow: "hidden",
        padding : 0,
        ease    : "power2.inOut",
        delay   : 1,
    })
} else {
    totalSeconds = Math.abs(finishDay - today) / 1000
}

console.log('total seconds ' + totalSeconds)

const timer = new Timer()
timer.start({
    countdown: true, startValues: {
        seconds: totalSeconds,
    }
})

// on update
timer.addEventListener("secondsUpdated", function () {
    document.querySelector(".clock .num.-d").innerHTML = timer.getTimeValues().days
    document.querySelector(".clock .num.-h").innerHTML = timer.getTimeValues().hours
    document.querySelector(".clock .num.-m").innerHTML = timer.getTimeValues().minutes
    document.querySelector(".clock .num.-s").innerHTML = timer.getTimeValues().seconds
})

// finish countdown
timer.addEventListener("targetAchieved", function () {

})