• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

218
Views
How to transform/animate with Chakra-UI?

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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()}
              />
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error