Animation » Example Animations » 7. While tap

7. While tap

You’ve heard of whileHover? Here’s whileTap.

Code component

export default function CC_07_While_tap(props) {
    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "pointer",
                }}
                whileTap={{ rotate: 90, scale: 0.75 }}
            />
        </div>
    )
}

Code override

export function While_tap(Component): ComponentType {
    return (props) => {
        return <Component {...props} whileTap={{ rotate: 90, scale: 0.75 }} />
    }
}

Leave a Reply