I am new by Framer motion, what I am trying to do is imitating wheel motion by moving image while it is rotating
I don't know how to make this work
I have tried something like this but it doesn't work
const imageRuning :Variants = {
hidden:{
x:"-100vw",
opacity:0
},
visible:{
x:0,
opacity:1,
transitionDuration:"3s"
},
rotation:{
rotate:[180,0],
transition:{
repeat:Infinity,
type:"tween",
ease:"linear"
}
}
}
const HomePage =()=> {
return (
<div className={style.animationContainer}>
<motion.img
className={style.animatedImage}
variants={imageRuning}
initial="hidden"
animate={["visible","rotation"]}
width={100} height={100} src="/static/me.jpg" >
</motion.img>
</div>
)
any help please ,
It looks like you are trying to animate two properties (x and rotate) with different transition values.
You can only animate to one variant at a time, so if you want them to happen at the same time, you'll need to combine those into a single variant. Luckily, you can specify unique transition values for any animating property by listing it within the transition object.
Like this:
visible: {
x: 0,
opacity: 1,
rotate: 180, // rotate and x animate in the same variant
transition: {
duration: 3, // default transition duration (applies to x and opacity)
rotate: {
// unique transition for rotate property only
repeat: Infinity,
type: "tween",
ease: "linear"
}
}
}
The way you have it set up, the object will continue rotating even after the x animation finishes (repeat: Infinity). Is that what you want? You can look into Animation Controls if you want more control.