Soy nuevo en Framer Motion, lo que estoy tratando de hacer es imitar el movimiento de la rueda moviendo la imagen mientras gira.
no se como hacer que esto funcione
He intentado algo como esto pero no funciona
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> )cualquier ayuda por favor,
Parece que está tratando de animar dos propiedades ( x y rotate ) con diferentes valores de transición.
Solo puede animar a una variante a la vez, por lo que si desea que sucedan al mismo tiempo, deberá combinarlas en una sola variante. Afortunadamente, puede especificar valores de transición únicos para cualquier propiedad de animación enumerándolos dentro del objeto de transition .
Como esto:
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" } } } De la forma en que lo tiene configurado, el objeto continuará girando incluso después de que finalice la animación x ( repeat: Infinity ). ¿Es eso lo que quieres? Puede consultar los Controles de animación si desea tener más control.