How do I set a duration for a useMotionValue animation? #2294
Unanswered
GavanWilhite
asked this question in
Q&A
Replies: 2 comments
-
@GavanWilhite const ChakraMotionProgress = chakra(motion.div) const ProgessIssue = () => {
} export default ProgessIssue You can try something like this, Here I've created an animated chakra progress bar using the chakra factory function, you can set a duration by playing around with the animationDuration variable which is in ms Let me know if you have any doubts or queries Hope this helps :D |
Beta Was this translation helpful? Give feedback.
0 replies
-
Thanks!
…On Sun, Aug 13, 2023 at 9:16 AM Albert Yumnam ***@***.***> wrote:
import { chakra } from ***@***.***/react"
import { motion, useMotionValue, useTransform, useSpring } from
"framer-motion";
import { useEffect } from "react";
const ChakraMotionProgress = chakra(motion.div)
const ProgessIssue = () => {
const progress = useMotionValue(0)
const progressSpring = useSpring(progress, { stiffness: 40 })
const animationDuration = 10000
const width = 300
useEffect(() => {
let i
i = setInterval(() => {
progress.set(progress.get() + 10)
}, 1000)
const t = setTimeout(() => {
clearInterval(i)
clearTimeout(t)
}, animationDuration)
return () => clearInterval(i)
}, [progress])
const progressValue = useTransform(progressSpring, [0, 100], [0, width])
return <>
<motion.div
style={{
width: `${width}px`,
margin: 'auto',
}}
>
<ChakraMotionProgress
style={{ width: progressValue }}
h="20px"
backgroundColor={"red"}
borderRadius="md"
/>
<motion.div>{progress}</motion.div>
</motion.div>
</>
}
export default ProgessIssue
You can try something like this, Here I've created an animated chakra
progress bar using the chakra factory function, you can set a duration by
playing around with the animationDuration variable which is in ms
Let me know if you have any doubts or queries
—
Reply to this email directly, view it on GitHub
<#2294 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAP5B72ROIDCVWXBOX3JOX3XVD4VLANCNFSM6AAAAAA3NVBPSE>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm trying to animate a Chakra UI progress bar, but it uses a 'value' for the progress amount, which I think is conflicting with a Framer Motion property. So I'm doing this:
It doesn't seem to be working though, and I can't figure out how I can set a duration. Thoughts?
Beta Was this translation helpful? Give feedback.
All reactions