Ji

Jay

Ji

Jay

Ji

Jay

Ji

Jay

Ji

Jay

VFX
VFX
Polychrome adds dynamic and colorful effects to elements, such as pointers and light.
Add a refraction effect to elements, and refraction will be affected by the cursor position.
VFX
VFX
Polychrome adds dynamic and colorful effects to elements, such as pointers and light.
Add a refraction effect to elements, and refraction will be affected by the cursor position.
VFX
VFX
Polychrome adds dynamic and colorful effects to elements, such as pointers and light.
Add a refraction effect to elements, and refraction will be affected by the cursor position.
A modern clock app icon featuring an analog clock face with black hour markers and hands on a white background. The icon has a gradient border transitioning from coral pink to purple blue, with rounded corners and a 3D effect.

Real data in Framer: Clock

Nov 1, 2022

Although Framer has become a web design tool, we can still use it for prototyping. This series will take advantage of Framer's Override feature to bring real data into Framer. In the first article we will design a real clock component using simple code.

The Clock UI

First, we need to create the UI layer for the clock, which will contain at least the hour, minute and second hands. Here is an example of the clock component in iOS, you can copy the component below directly into the Framer to speed up the process.


When creating the hands, we put the hands part in a square Frame, which will make it easier for us to continue.

design-clock

Override

Create a new Override file in the Framer and create separate function components called Hour, Minute and Second.

export function Hour(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}

Then connect each of the three Override components to the hour, minute and second hands in the UI layer.

link-override

Using Date()

The Date object provided by JS allows us to get the current time very easily. We use this to get the current hour, minute, second and millisecond data respectively. To make it easier to use this data, we define it as a "number".

const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())

The Second Hand

Our goal is to give the seconds a smooth rotation (like iOS), and Framer Motion can do this for us. First, we create **Variants** named "from" and "to", set initial to "from" and set animate to "to".

export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
            },
            to: {
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}

"from" is the initial angle of the second hand, which depends on the seconds in the current time. The second hand turns 6 degrees per second on the clock, so we set the angle in "from" to 6 \* second.

    from: {
                rotate: 6 * second，
            },

Now we have a starting angle for our second hand. But it will only start at 0°, 6°, 12° ...... each time. To make the angle more precise, we add milliseconds as a reference.

    from: {
                rotate: 6 * second + 6 * (millisecond / 1000)，
            },

This gives us a more accurate starting point. Next, we set the end point of the animation "to" for the second hand, simply by adding 360° to the starting point. In addition we set the easing curve to “linear”, with a duration of 60s and infinite repetition.

    to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },

Now we can see that the seconds hand is working perfectly.

Minute and Hour Hands

For the minute hand and the hour hand we use the same method. For the starting angle of the minute hand, we combine "minute" with "second" and set the duration to 3600s (one hour).

        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }

The hour hand is calculated using "hour" and "minute". Before we use hour data, we need to convert the data because hour is calculated in 24 hour and the maximum number on the hour hand is only 12. When the hour hand reaches 12 noon (hour = 12), we need to return hour to 0 so that the hour hand can work correctly. A simple judgement is all that is needed here.

 const hour12 = hour >= 12 ? hour - 12 : hour

Then add the same Variant parameter for the hour hand, noting that we have to set the duration of the animation to 43200s (12 hours).

        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }


The Full Code

import type { ComponentType } from "react"
const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())
export function Hour(Component): ComponentType {
    return (props) => {
        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * second + 6 * (millisecond / 1000),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}


Now all the pointers are starting to work correctly. This is my current animation using Framer Motion's Variants feature, which may have accuracy issues with some of the data, so if you have a better solution, please feel free to share it with me.

Content

Let's talk
To
jayzhushi@gmail.com
Let's talk
@jayzhushi
@jayzhushi
季杰 - Shanghai
A modern clock app icon featuring an analog clock face with black hour markers and hands on a white background. The icon has a gradient border transitioning from coral pink to purple blue, with rounded corners and a 3D effect.

Real data in Framer: Clock

Nov 1, 2022

Although Framer has become a web design tool, we can still use it for prototyping. This series will take advantage of Framer's Override feature to bring real data into Framer. In the first article we will design a real clock component using simple code.

The Clock UI

First, we need to create the UI layer for the clock, which will contain at least the hour, minute and second hands. Here is an example of the clock component in iOS, you can copy the component below directly into the Framer to speed up the process.


When creating the hands, we put the hands part in a square Frame, which will make it easier for us to continue.

design-clock

Override

Create a new Override file in the Framer and create separate function components called Hour, Minute and Second.

export function Hour(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}

Then connect each of the three Override components to the hour, minute and second hands in the UI layer.

link-override

Using Date()

The Date object provided by JS allows us to get the current time very easily. We use this to get the current hour, minute, second and millisecond data respectively. To make it easier to use this data, we define it as a "number".

const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())

The Second Hand

Our goal is to give the seconds a smooth rotation (like iOS), and Framer Motion can do this for us. First, we create **Variants** named "from" and "to", set initial to "from" and set animate to "to".

export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
            },
            to: {
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}

"from" is the initial angle of the second hand, which depends on the seconds in the current time. The second hand turns 6 degrees per second on the clock, so we set the angle in "from" to 6 \* second.

    from: {
                rotate: 6 * second，
            },

Now we have a starting angle for our second hand. But it will only start at 0°, 6°, 12° ...... each time. To make the angle more precise, we add milliseconds as a reference.

    from: {
                rotate: 6 * second + 6 * (millisecond / 1000)，
            },

This gives us a more accurate starting point. Next, we set the end point of the animation "to" for the second hand, simply by adding 360° to the starting point. In addition we set the easing curve to “linear”, with a duration of 60s and infinite repetition.

    to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },

Now we can see that the seconds hand is working perfectly.

Minute and Hour Hands

For the minute hand and the hour hand we use the same method. For the starting angle of the minute hand, we combine "minute" with "second" and set the duration to 3600s (one hour).

        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }

The hour hand is calculated using "hour" and "minute". Before we use hour data, we need to convert the data because hour is calculated in 24 hour and the maximum number on the hour hand is only 12. When the hour hand reaches 12 noon (hour = 12), we need to return hour to 0 so that the hour hand can work correctly. A simple judgement is all that is needed here.

 const hour12 = hour >= 12 ? hour - 12 : hour

Then add the same Variant parameter for the hour hand, noting that we have to set the duration of the animation to 43200s (12 hours).

        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }


The Full Code

import type { ComponentType } from "react"
const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())
export function Hour(Component): ComponentType {
    return (props) => {
        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * second + 6 * (millisecond / 1000),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}


Now all the pointers are starting to work correctly. This is my current animation using Framer Motion's Variants feature, which may have accuracy issues with some of the data, so if you have a better solution, please feel free to share it with me.

Content

Let's talk
To
jayzhushi@gmail.com
Let's talk
@jayzhushi
@jayzhushi
季杰 - Shanghai
A modern clock app icon featuring an analog clock face with black hour markers and hands on a white background. The icon has a gradient border transitioning from coral pink to purple blue, with rounded corners and a 3D effect.

Real data in Framer: Clock

Nov 1, 2022

Although Framer has become a web design tool, we can still use it for prototyping. This series will take advantage of Framer's Override feature to bring real data into Framer. In the first article we will design a real clock component using simple code.

The Clock UI

First, we need to create the UI layer for the clock, which will contain at least the hour, minute and second hands. Here is an example of the clock component in iOS, you can copy the component below directly into the Framer to speed up the process.


When creating the hands, we put the hands part in a square Frame, which will make it easier for us to continue.

design-clock

Override

Create a new Override file in the Framer and create separate function components called Hour, Minute and Second.

export function Hour(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}

Then connect each of the three Override components to the hour, minute and second hands in the UI layer.

link-override

Using Date()

The Date object provided by JS allows us to get the current time very easily. We use this to get the current hour, minute, second and millisecond data respectively. To make it easier to use this data, we define it as a "number".

const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())

The Second Hand

Our goal is to give the seconds a smooth rotation (like iOS), and Framer Motion can do this for us. First, we create **Variants** named "from" and "to", set initial to "from" and set animate to "to".

export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
            },
            to: {
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}

"from" is the initial angle of the second hand, which depends on the seconds in the current time. The second hand turns 6 degrees per second on the clock, so we set the angle in "from" to 6 \* second.

    from: {
                rotate: 6 * second，
            },

Now we have a starting angle for our second hand. But it will only start at 0°, 6°, 12° ...... each time. To make the angle more precise, we add milliseconds as a reference.

    from: {
                rotate: 6 * second + 6 * (millisecond / 1000)，
            },

This gives us a more accurate starting point. Next, we set the end point of the animation "to" for the second hand, simply by adding 360° to the starting point. In addition we set the easing curve to “linear”, with a duration of 60s and infinite repetition.

    to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },

Now we can see that the seconds hand is working perfectly.

Minute and Hour Hands

For the minute hand and the hour hand we use the same method. For the starting angle of the minute hand, we combine "minute" with "second" and set the duration to 3600s (one hour).

        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }

The hour hand is calculated using "hour" and "minute". Before we use hour data, we need to convert the data because hour is calculated in 24 hour and the maximum number on the hour hand is only 12. When the hour hand reaches 12 noon (hour = 12), we need to return hour to 0 so that the hour hand can work correctly. A simple judgement is all that is needed here.

 const hour12 = hour >= 12 ? hour - 12 : hour

Then add the same Variant parameter for the hour hand, noting that we have to set the duration of the animation to 43200s (12 hours).

        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }


The Full Code

import type { ComponentType } from "react"
const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())
export function Hour(Component): ComponentType {
    return (props) => {
        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * second + 6 * (millisecond / 1000),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}


Now all the pointers are starting to work correctly. This is my current animation using Framer Motion's Variants feature, which may have accuracy issues with some of the data, so if you have a better solution, please feel free to share it with me.

Content

Let's talk
To
jayzhushi@gmail.com
Let's talk
@jayzhushi
@jayzhushi
季杰 - Shanghai
A modern clock app icon featuring an analog clock face with black hour markers and hands on a white background. The icon has a gradient border transitioning from coral pink to purple blue, with rounded corners and a 3D effect.

Real data in Framer: Clock

Nov 1, 2022

Although Framer has become a web design tool, we can still use it for prototyping. This series will take advantage of Framer's Override feature to bring real data into Framer. In the first article we will design a real clock component using simple code.

The Clock UI

First, we need to create the UI layer for the clock, which will contain at least the hour, minute and second hands. Here is an example of the clock component in iOS, you can copy the component below directly into the Framer to speed up the process.


When creating the hands, we put the hands part in a square Frame, which will make it easier for us to continue.

design-clock

Override

Create a new Override file in the Framer and create separate function components called Hour, Minute and Second.

export function Hour(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}

Then connect each of the three Override components to the hour, minute and second hands in the UI layer.

link-override

Using Date()

The Date object provided by JS allows us to get the current time very easily. We use this to get the current hour, minute, second and millisecond data respectively. To make it easier to use this data, we define it as a "number".

const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())

The Second Hand

Our goal is to give the seconds a smooth rotation (like iOS), and Framer Motion can do this for us. First, we create **Variants** named "from" and "to", set initial to "from" and set animate to "to".

export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
            },
            to: {
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}

"from" is the initial angle of the second hand, which depends on the seconds in the current time. The second hand turns 6 degrees per second on the clock, so we set the angle in "from" to 6 \* second.

    from: {
                rotate: 6 * second，
            },

Now we have a starting angle for our second hand. But it will only start at 0°, 6°, 12° ...... each time. To make the angle more precise, we add milliseconds as a reference.

    from: {
                rotate: 6 * second + 6 * (millisecond / 1000)，
            },

This gives us a more accurate starting point. Next, we set the end point of the animation "to" for the second hand, simply by adding 360° to the starting point. In addition we set the easing curve to “linear”, with a duration of 60s and infinite repetition.

    to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },

Now we can see that the seconds hand is working perfectly.

Minute and Hour Hands

For the minute hand and the hour hand we use the same method. For the starting angle of the minute hand, we combine "minute" with "second" and set the duration to 3600s (one hour).

        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }

The hour hand is calculated using "hour" and "minute". Before we use hour data, we need to convert the data because hour is calculated in 24 hour and the maximum number on the hour hand is only 12. When the hour hand reaches 12 noon (hour = 12), we need to return hour to 0 so that the hour hand can work correctly. A simple judgement is all that is needed here.

 const hour12 = hour >= 12 ? hour - 12 : hour

Then add the same Variant parameter for the hour hand, noting that we have to set the duration of the animation to 43200s (12 hours).

        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }


The Full Code

import type { ComponentType } from "react"
const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())
export function Hour(Component): ComponentType {
    return (props) => {
        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * second + 6 * (millisecond / 1000),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}


Now all the pointers are starting to work correctly. This is my current animation using Framer Motion's Variants feature, which may have accuracy issues with some of the data, so if you have a better solution, please feel free to share it with me.

Content

Let's talk
To
jayzhushi@gmail.com
Let's talk
@jayzhushi
@jayzhushi
季杰 - Shanghai
A modern clock app icon featuring an analog clock face with black hour markers and hands on a white background. The icon has a gradient border transitioning from coral pink to purple blue, with rounded corners and a 3D effect.

Real data in Framer: Clock

Nov 1, 2022

Although Framer has become a web design tool, we can still use it for prototyping. This series will take advantage of Framer's Override feature to bring real data into Framer. In the first article we will design a real clock component using simple code.

The Clock UI

First, we need to create the UI layer for the clock, which will contain at least the hour, minute and second hands. Here is an example of the clock component in iOS, you can copy the component below directly into the Framer to speed up the process.


When creating the hands, we put the hands part in a square Frame, which will make it easier for us to continue.

design-clock

Override

Create a new Override file in the Framer and create separate function components called Hour, Minute and Second.

export function Hour(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
            />
        )
    }
}

Then connect each of the three Override components to the hour, minute and second hands in the UI layer.

link-override

Using Date()

The Date object provided by JS allows us to get the current time very easily. We use this to get the current hour, minute, second and millisecond data respectively. To make it easier to use this data, we define it as a "number".

const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())

The Second Hand

Our goal is to give the seconds a smooth rotation (like iOS), and Framer Motion can do this for us. First, we create **Variants** named "from" and "to", set initial to "from" and set animate to "to".

export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
            },
            to: {
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}

"from" is the initial angle of the second hand, which depends on the seconds in the current time. The second hand turns 6 degrees per second on the clock, so we set the angle in "from" to 6 \* second.

    from: {
                rotate: 6 * second，
            },

Now we have a starting angle for our second hand. But it will only start at 0°, 6°, 12° ...... each time. To make the angle more precise, we add milliseconds as a reference.

    from: {
                rotate: 6 * second + 6 * (millisecond / 1000)，
            },

This gives us a more accurate starting point. Next, we set the end point of the animation "to" for the second hand, simply by adding 360° to the starting point. In addition we set the easing curve to “linear”, with a duration of 60s and infinite repetition.

    to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },

Now we can see that the seconds hand is working perfectly.

Minute and Hour Hands

For the minute hand and the hour hand we use the same method. For the starting angle of the minute hand, we combine "minute" with "second" and set the duration to 3600s (one hour).

        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }

The hour hand is calculated using "hour" and "minute". Before we use hour data, we need to convert the data because hour is calculated in 24 hour and the maximum number on the hour hand is only 12. When the hour hand reaches 12 noon (hour = 12), we need to return hour to 0 so that the hour hand can work correctly. A simple judgement is all that is needed here.

 const hour12 = hour >= 12 ? hour - 12 : hour

Then add the same Variant parameter for the hour hand, noting that we have to set the duration of the animation to 43200s (12 hours).

        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }


The Full Code

import type { ComponentType } from "react"
const hour = Number(new Date().getHours())
const minute = Number(new Date().getMinutes())
const second = Number(new Date().getSeconds())
const millisecond = Number(new Date().getMilliseconds())
export function Hour(Component): ComponentType {
    return (props) => {
        const hour12 = hour >= 12 ? hour - 12 : hour
        const variant = {
            from: {
                rotate: 30 * hour12 + 30 * (minute / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 30 * hour12 + 30 * (minute / 60) + 360,
                transition: {
                    duration: 43200,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Minute(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * minute + 6 * (second / 60),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * minute + 6 * (second / 60) + 360,
                transition: {
                    duration: 3600,
                    ease: "linear",
                    repeat: Infinity,
                },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}
export function Second(Component): ComponentType {
    return (props) => {
        const variant = {
            from: {
                rotate: 6 * second + 6 * (millisecond / 1000),
                transition: { duration: 0, ease: "linear" },
            },
            to: {
                rotate: 6 * second + 6 * (millisecond / 1000) + 360,
                transition: { duration: 60, ease: "linear", repeat: Infinity },
            },
        }
        return (
            <Component
                {...props}
                variants={variant}
                initial={"from"}
                animate={"to"}
            />
        )
    }
}


Now all the pointers are starting to work correctly. This is my current animation using Framer Motion's Variants feature, which may have accuracy issues with some of the data, so if you have a better solution, please feel free to share it with me.

Content

Let's talk
To
jayzhushi@gmail.com
Let's talk
@jayzhushi
@jayzhushi
季杰 - Shanghai
Tablet of content
Tablet of content
Tablet of content
About Spring Animation

@2025 THE STAGE FOR JAY JI.

  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

@2025 THE STAGE FOR JAY JI.

  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

@2025 THE STAGE FOR JAY JI.

  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

@2025 THE STAGE FOR JAY JI.

  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

@2025 THE STAGE FOR JAY JI.

  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  •  
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9