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 }} />
    }
}


Join the Framer book mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply