Animation » Example Animations » 6. While hover

6. While hover

Add one line of code to create a whileHover animation between two states.

Code component

export default function CC_06_While_hover(props) {
    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                }}
                whileHover={{ scale: 0.8 }}
            />
        </div>
    )
}

Code override

export function While_hover(Component): ComponentType {
    return (props) => {
        return <Component {...props} whileHover={{ scale: 0.8 }} />
    }
}

Leave a Reply