Animated-Counter-Test

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #TickerTransitionPoint {
            padding: 20px;
            background-color: #ddd;
            cursor: pointer;
        }
    </style>
    <title>Counting Animation Example</title>
</head>
<body>

<div id="TickerTransitionPoint">Enter the viewport to start counting! (Move your mouse to this field and hold...</div>
<div id="counter">0</div>

<script>
    let timer; // The countup timer;

    document.addEventListener("DOMContentLoaded", function () {
        const strip = document.getElementById("TickerTransitionPoint");

        strip.addEventListener("mouseenter", () => startCounting());
        strip.addEventListener("mouseleave", () => stopCounting());
    });

    function startCounting() {
        const settings = {
            endNum: 35,
            current: 0,
        };

        const endIn = 150;
        timer = setInterval(() => {
            document.getElementById("counter").innerText = settings.current.toString();
            settings.current++;
            if (settings.current > settings.endNum) {
                stopCounting();
            }
        }, 150);
    }

    function stopCounting() {
        if (timer) {
            clearInterval(timer);
            timer = undefined;
        }
    }
</script>

</body>
</html>