I want to create a custom radioButton with framer-motion

Question

We are using react and typescript.
The design library is chakra-ui.
We are using framer-motion for animation.
What I want to do
I want to create original radio buttons. RadioButton behavior
When the user hovers the button → the radio button turns blue (the check icon is not displayed.)
When the radio button is pressed down → The radio button turns blue, and the check icon is displayed (the animation implemented in frame-motion is applied.)

Current radio button behavior
When the button is hovered → The color does not change to blue.
When the radio button is pressed → The animation implemented by framer-motion is not applied to the check icon.

If anyone can help me, please answer.

import React from 'react';
import { Center, VStack, HStack } from '@chakra-ui/layout';
import { Radio } from 'components/Radio';
import { useRadioGroup } from '@chakra-ui/radio';

export const Index: React.FunctionComponent = () => {
  const options = ['1', '2', '3'];
  const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'framework',
    defaultValue: 'react',
    onChange: console.log,
  });
  const group = getRootProps();
  return (
    <Center paddingX={4}>
        <HStack {...group} gridGap={12}>
          {options.map((value) => {
            const radio = getRadioProps({ value });
            return <Radio key={value} {...radio}></Radio>;
          })}
        </HStack>
    </Center>
  );
};

import { useState } from 'react';
import { RadioProps, useRadio } from '@chakra-ui/radio';
import { Icon,Box } from '@chakra-ui/react';
import { motion, useMotionValue, HTMLMotionProps } from 'framer-motion';
import { HTMLChakraProps, chakra } from '@chakra-ui/react';
type Merge<P, T> = Omit<P, keyof T> & T;
type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>;

export const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);

export const Radio: React.FunctionComponent<RadioProps> = (props) => {
  const { getInputProps, getCheckboxProps } = useRadio(props);

  const input = getInputProps();
  const checkbox = getCheckboxProps();
  const [isChecked, setIsChecked] = useState(false);
  return (
    <>
      <MotionBox
        position="relative"
        as="label"
        whileTap={{
          scale: 0.95,
          borderRadius: '100%',
        }}
        whileHover={{
          scale: 1.05,
        }}
        onTap={() => setIsChecked(!isChecked)}
      >
        <input {...input} />
        <Box
          {...checkbox}
          cursor="pointer"
          borderWidth="1px"
          borderRadius="100%"
          boxShadow="md"
          _checked={{
            bg: 'blue.100',
            color: 'white',
            borderColor: 'blue.100',
          }}
          _focus={{
            boxShadow: 'outline',
          }}
          _hover={{
            background: 'blue.100',
          }}
          px={7}
          py={7}
        >
          {props.children}
        </Box>
        <MotionBox
          position="absolute"
          top={3}
          left={3}
          style={{
            originX: 0,
            originY: 1,
          }}
          initial={{ opacity: 0, scale: 0.1 }}
          animate={{
            opacity: 1,
            scale: 1,
          }}
          transition={{
            duration: 3,
          }}
        >
          <Icon fontSize={'35px'}>
            <path
              d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
              fill="#ffffff"
              strokeWidth="0.5"
              stroke="#ffffff"
            />
          </Icon>
        </MotionBox>
      </MotionBox>
    </>
  );
};

don't see your codes to change to blue whileHover, only see scale: 1.05 — Someone Special, Apr 14 '21 at 05:24

Someone Special · Answer 1 · 2021-04-14T07:18:27.247

2

You need to rebase your codes to it uses motion.div.

For example, for your background color to change.

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    Hover Me
  </motion.div>
</div>

If you use the following, the div background will change, but it will not affect the background of the button unless u set style {{backgroundColor: 'inherit'}}

// following button background won't change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    <button>I am a button</button>
  </motion.div>
</div>

//following background of button will change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    <button style={{ backgroundColor: 'inherit' }}>I am a button</button>
  </motion.div>
</div>

Simple example https://codesandbox.io/s/cocky-kapitsa-nl5bs

For SVG it's the same thing.

 <motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
     fill="#ffffff"
     strokeWidth="0.5"
     stroke="#ffffff"
     />
   </motion.svg>

If you want to animate individual paths you need to convert it to motion.path

<motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <motion.path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
      initial={{ opacity: 0 }}
      animate={{ fill: "#ffffff", opacity: 1 }}
      strokeWidth="0.5"
      stroke="#ffffff"
                />
 </motion.svg>

edited Apr 14 '21 at 07:18

answered Apr 14 '21 at 07:10

Someone Special

6,546
5
25
50

I looked at the codesandbox and it shows the List component. What I want to create is a radiobutton. – ryuma Apr 14 '21 at 07:15
updated to show correct codesandbox – Someone Special Apr 14 '21 at 07:19
Also, div tags cannot be used, and since we are using chakra UI, css cannot be written. If you use div tags, you have to use css to apply the style. – ryuma Apr 14 '21 at 07:20
then do it your way, but remember to inherit the background if you want color to change. You don't have to follow our answers, you can use it as a guide. – Someone Special Apr 14 '21 at 07:20
I tried it, but it didn't change anything. – ryuma Apr 14 '21 at 07:27
tried what, doesn't change what? Does the codesandbox work for you? – Someone Special Apr 14 '21 at 07:28
I tried it in my environment (chakra ui), but it didn't change. – ryuma Apr 14 '21 at 07:31
updated codesandbox to use chakra and it works - https://codesandbox.io/s/cocky-kapitsa-nl5bs?file=/src/App.js – Someone Special Apr 14 '21 at 07:34
show your updated codes or create a codesandbox. We wouldn't know what you changed since. – Someone Special Apr 14 '21 at 07:35
I want to use codesandbox, but when I create an environment with codesandbox, I get a module error. – ryuma Apr 14 '21 at 07:36
unless you are very good with your chakra-ui or you are very good with framer-motion, i don't recommend using them both together. https://codesandbox.io/s/wispy-platform-58f56 this codesandbox is a chakra only solution – Someone Special Apr 14 '21 at 13:18
because you already have hover and checked solutions from chakra. – Someone Special Apr 14 '21 at 13:21
I looked at codesandbox, but there was an error and I couldn't see the screen. – ryuma Apr 14 '21 at 13:56
It's not about framer-motion, you need to rewrite global/page/class css. You just add className to your element, and in this class you writes your css. – ChilTest Apr 15 '21 at 11:26

I want to create a custom radioButton with framer-motion

1 Answers1