Framer X » Animation » Example animations » 23. Color: Layered

23. Color: Layered

The Code Component uses React’s useState() hook. In the Override version, I use a simple Boolean inside the Data object.

Open Framer Motion version in CodeSandbox

Code Component

export function CC23ColorLayered() {
    const [isHover, setHover] = useState(false)

    return (
        <Frame
            // Visual & layout
            size="100%"
            backgroundColor="#60F"
            // Animation
            animate={{ backgroundColor: isHover ? "#08F" : "#60F" }}
            transition={{ duration: 0.5 }}
        >
            <Frame
                // Visual & layout
                size={150}
                radius={30}
                backgroundColor="#fff"
                center
                // Animation
                animate={{
                    scale: isHover ? 0.8 : 1,
                    rotate: isHover ? 90 : 0,
                }}
                onHoverStart={() => {
                    setHover(true)
                }}
                onHoverEnd={() => {
                    setHover(false)
                }}
            />
        </Frame>
    )
}

Framer Motion

export function FM23ColorLayered() {
    const [isHover, setHover] = useState(false)

    return (
        <motion.div
            style={{
                width: "100%",
                height: "100%",
                backgroundColor: "#60F",
                display: "flex",
                placeItems: "center",
                placeContent: "center",
            }}
            animate={{ backgroundColor: isHover ? "#08F" : "#60F" }}
            transition={{ duration: 0.5 }}
        >
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                }}
                animate={{
                    scale: isHover ? 0.8 : 1,
                    rotate: isHover ? 90 : 0,
                }}
                onHoverStart={() => {
                    setHover(true)
                }}
                onHoverEnd={() => {
                    setHover(false)
                }}
            />
        </motion.div>
    )
}

Overrides

const appState = Data({
    isHover: false,
})

export function Background(): Override {
    return {
        animate: { backgroundColor: appState.isHover ? "#08F" : "#60F" },
        transition: { duration: 0.5 },
    }
}

export function Color_Layered(): Override {
    return {
        animate: {
            scale: appState.isHover ? 0.8 : 1,
            rotate: appState.isHover ? 90 : 0,
        },
        onHoverStart() {
            appState.isHover = true
        },
        onHoverEnd() {
            appState.isHover = false
        },
    }
}

Leave a Reply