Back

Library

/

Basic

/

113

Countdown Timer

113

Countdown Timer

Display a count up to or down to a date on any text

Made by

@frameroverrides

override

none

Override

Countdown Timer

Copy

Override

Copied to Clipboard!

Instructions

  1. Apply to any text layer

  2. Customize the date at the top of the code const startDate = new Date("2023-01-01T00:00:00")

  3. Apply the overrides to individual text layers using "hours" "minutes" etc.


Code Preview

import type { ComponentType } from "react"
import { useEffect, useState } from "react"

const startDate = new Date("2023-01-01T00:00:00")

const calculateDifference = (countDirection: string) => {
    const now = new Date()
    let difference = now.getTime() - startDate.getTime()

    if (countDirection === "down") {
        difference = -difference // Invert difference for countdown
    }

    return difference
}

export function Days(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const days = Math.abs(
                Math.floor(difference / (1000 * 60 * 60 * 24))
            )
            return `${days}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Hours(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const hours = Math.abs(
                Math.floor(
                    (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                )
            )
            return `${hours}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Minutes(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const minutes = Math.abs(
                Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
            )
            return `${minutes}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Seconds(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const seconds = Math.abs(Math.floor((difference / 1000) % 60))
            return `${seconds}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Milliseconds(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const milliseconds = Math.abs(difference % 1000)
            return `${milliseconds}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

Terms of Use for Pro & VIP Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, paid templates only (with the use of up to 10 assets per template), and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.