Chakra UI + Framer Motion

This example shows how to add some interesting motion interaction or animation to your Chakra UI websites or apps with Framer Motion.

Usage#

There are two ways to use as props and chakra factory.

chakra factory#

The chakra factory function can be used to represent animation and interaction using framer motion props, as in the example below.

import { chakra } from '@chakra-ui/react'
import { motion, isValidMotionProp } from 'framer-motion'

const ChakraBox = chakra(motion.div, {
  shouldForwardProp: isValidMotionProp,
})

Let's see an example using the chakra factory function!

import { Container, chakra } from '@chakra-ui/react';
import { motion, isValidMotionProp } from 'framer-motion';
  
const ChakraBox = chakra(motion.div, {
  shouldForwardProp: isValidMotionProp,
});
  
export default function App() {
  return (
    <Container h="100vh" d="flex" alignItems="center" justifyContent="center">
      <ChakraBox
        animate={{
          scale: [1, 2, 2, 1, 1],
          rotate: [0, 0, 270, 270, 0],
          borderRadius: ["20%", "20%", "50%", "50%", "20%"],
        }}
        // @ts-ignore no problem in operation, although type error appears.
        transition={{
          duration: 2,
          ease: "easeInOut",
          repeat: Infinity,
          repeatType: "loop",
        }}
        padding="2"
        bgGradient="linear(to-l, #7928CA, #FF0080)"
        width="12"
        height="12"
        display="flex"
      />
    </Container>
  )
}

as prop#

You can also use as prop to add animations and interactions.

It is important to note that if there are props with the same name as the chakra props, they take precedence over the framer motion props. For example, a transition will take precedence over a framer motion prop and the framer motion feature will not work.

import { Box } from '@chakra-ui/react'
import { motion } from 'framer-motion'

function Example() {
  return (
    <Box
      as={motion.div}
      height='40px'
      width='40px'
      bg='orange.400'
      drag='x'
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      transition='0.5s linear'
      // not work: transition={{ transition: "0.5", ease: "linear" }}
    />
  )
}

Let's look at an example of as prop!

import { Box, Container, keyframes } from '@chakra-ui/react';
import { motion } from 'framer-motion';

const animationKeyframes = keyframes`
  0% { transform: scale(1) rotate(0); border-radius: 20%; }
  25% { transform: scale(2) rotate(0); border-radius: 20%; }
  50% { transform: scale(2) rotate(270deg); border-radius: 50%; }
  75% { transform: scale(1) rotate(270deg); border-radius: 50%; }
  100% { transform: scale(1) rotate(0); border-radius: 20%; }
`;

const animation = `${animationKeyframes} 2s ease-in-out infinite`;
  
export default function App() {
  return (
    <Container h="100vh" d="flex" alignItems="center" justifyContent="center">
      <Box
        as={motion.div}
        animation={animation}
        // not work: transition={{ ... }}
        padding="2"
        bgGradient="linear(to-l, #7928CA, #FF0080)"
        width="12"
        height="12"
        display="flex"
      />
    </Container>
  )
};