Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.
Tengo un conjunto de variantes definidas de la siguiente manera: const letterVariants: Variants = { visible: (custom: number) => ({ opacity: 1, y: 0, transition: { delay: custom * 0.1, }, }), hidden: { opacity: 0, y: 100, }, hover: { y: -30, transition: { delay: 0, }, }, }; . . . Read more
Entonces quiero crear un círculo de progreso de desplazamiento de viewport con Framer Motion en una aplicación Next.js (usando Tailwind como CSS). Utilicé el código de ejemplo de Framer Motion: El código que tengo aquí muestra el círculo, pero cuando habilito strokeDasharray o pathLength (en el atributo style) desaparece. Y . . . Read more
Tengo un componente de animación framer motion (también he intentado con componentes Stitches) que anima hacia y desde la vista basado en una variable useState: const [visible, setVisible] = useState(true); <motion.div animate=”{visible” “one”=”” :=”” “two”}=”” variants=”{{” one:=”” {=”” transform:=”” “translatex(0%)”,=”” opacity:=”” 1=”” },=”” two:=”” {=”” transform:=”” “translatex(100%)”,=”” opacity:=”” 0=”” }=”” . . . Read more
Estoy intentando ralentizar una animación infinita usando framer-motion cambiando el valor de duración en la propiedad de transición. Estoy utilizando el hook useMotionValue y la función animate: const [count, setCount] = useState(1); const scale = useMotionValue(1); React.useEffect(() => { // el [1, 2] es para [desde, hasta] const controls = . . . Read more
Estoy tratando de actualizar mi react-router-dom a la versión 6, pero parece estar causando problemas con AnimatePresence de framer motions, específicamente con la transición de salida. En App.js: import { Routes, Route } from “react-router-dom”; import { AnimatePresence } from “framer-motion”; import Home from “./Components/Home”; import About from “./Components/About”; function . . . Read more