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 whileHover, whileTap, 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 }}
            />
        )
    }
}

8. While drag

Code component

Code override

Join the Mighty Guides mailing list ( ± 6 emails/year )

Leave a Reply Cancel reply