Some Examples » 8. While drag

8. While drag

Use whileDrag to change how a layer looks when you pick it up. Here we have a draggable box with whileHoverwhileTap, and whileDrag animations:

Code component

export default function CC_08_While_drag(props) {
    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    opacity: 0.7,
                }}
                drag
                whileHover={{ opacity: 1 }}
                whileTap={{
                    opacity: 1,
                    scale: 1.05,
                    boxShadow: "0px 5px 8px #222",
                }}
                whileDrag={{ scale: 1.1, boxShadow: "0px 10px 16px #222" }}
                transition={{ duration: 0.6 }}
            />
        </div>
    )
}

Code override

export function While_drag(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                drag
                whileHover={{ opacity: 1 }}
                whileTap={{
                    opacity: 1,
                    scale: 1.05,
                    boxShadow: "0px 5px 8px #222",
                }}
                whileDrag={{ scale: 1.1, boxShadow: "0px 10px 16px #222" }}
                transition={{ duration: 0.6 }}
            />
        )
    }
}

Join the Mighty Guides 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