Started using chakra-ui, and really loving it so far, but I'm struggling to figure out how to do a simple animation.
I have an image that i want to increase it's size onClick.
I've briefly looked at framer-motion but it seems a bit overkill for what i need.
I tried it anyways and kept getting an error when trying to define motionBox with typescript:
import { Flex, Container, HStack, Box, BoxProps } from "@chakra-ui/react";
import { motion } from "framer-motion";
const MotionBox = motion < BoxProps > Box;
errors:
Operator '>' cannot be applied to types 'boolean' and 'ChakraComponent<"div", {}>'.ts(2365)
'BoxProps' only refers to a type, but is being used as a value here.ts(2693)
Is there a simple way to animate with chakra? or should i just try to figure out my errors with framer?
I figured out a solution using state: Whilst it's not technically animated, it does what i need.
(I also got framer working, creating a custom motion component, but using JS not TS)
const [size, setSize] = useState("20vh");
const toggleSize = () => {
if (size === "20vh") {
setSize("50vh");
} else {
setSize("20vh");
}
};
<Image
p="5px"
alt={product.id}
src={product.img[1]}
w={size}
maxH="50vh"
m="auto"
borderRadius="10px"
onClick={() => toggleSize()}
/>