While Hover and While Tap

This is absolutely the easiest way to add interactivity to a canvas element. With just one line of code, you add an automatic animation between two states.

• While Hover
• While Tap
• Both
• Variants
  • Remember States?
  • Children
  • Orchestration
  • Initial

While Hover

Here’s an override example: You give whileHover an object with the properties you want to animate, just like you did earlier with animate.

import { Override } from "framer"

export function WhileHover(): Override {
    return {
        whileHover: { scale: 0.8 },
    }
}

The frame shrinks to 80 percent of its size when you hover over it and it grows again when the hover ends.

With this one line of code you’ve added two animations:

• one that happens when the pointer is over the frame;
• and a reverse animation that runs when the pointer leaves the frame.

And here’s how you do it in a code component:

export function C01_WhileHover() {
    return (
        <Frame
            whileHover={{ scale: 0.8 }}
        />
    )
}

(The {{double curly braces}} are there because you’re writing the object directly inline.)

📑 whileHover

While Tap

The second one, whileTap, works the same, but for taps.

And just like with animate, you can tweak these animations by adding transition settings.

import { Override } from "framer"

export function WhileTap(): Override {
    return {
        whileTap: { scale: 0.8 },
        transition: { duration: 0.5 },
    }
}

Here the frame shrinks when you press down, but it will take its sweet little time of half a second to do it. And the same thing happens when you release; the grow animation also has a duration of 0.5.

📑 whileTap

Both

Naturally, you can also use both whileHover and whileTap at the same time:

import { Override } from "framer"

export function WhileHover_WhileTap(): Override {
    return {
        whileHover: { radius: 75 },
        whileTap: { backgroundColor: "Gold" },
    }
}

Variants

Now that we’ve already seen three ways to start an animation, we can talk about variants.

You usually give animate (or whileHover, whileTap) an object with properties to animate to, something like, for example, { rotate: 180 }.

With variants, you can give those animation states a name, a variant label, and you tell animate (or whileHover, whileTap,…) to animate to that label.

const variants = {
    start: { rotate: 180 },
    hoverState: { radius: 75 },
    tapState: { backgroundColor: "Gold" },
}

export function Variants(): Override {
    return {
        variants: variants,
        animate: "start",
        whileHover: "hoverState",
        whileTap: "tapState",
    }
}

For this to work, you also need to provide the frame with the variants themselves, though, so it knows that, for example, "start" stands for { rotate: 180 }.

Here the variants are written in a separate object (called variants), but as you’ll see in the next example, you can also write them inline.

Remember states?

In Framer Classic we had something similar to variants: states.

However, ‘states’ already has a meaning in the React world (think of useState()), so the Framer team picked a different name.

As another aside: The Framer animation API is (partly) based on Popmotion’s Pose, an animation library for React. That library’s poses are the predecessors of Framer’s variants.

📑 variants

Children

It gets even better when your frame has children. When you give a child a set of variants (with the same labels), it will animate simultaneously, automatically.

Here the Variants() override is applied to the parent and Variants_Children() to the child.

// Override for the parent
export function Parent(): Override {
    return {
        variants: {
            start: { rotate: 180 },
            hoverState: { radius: 75 },
            tapState: { backgroundColor: "Gold" },
        },
        animate: "start",
        whileHover: "hoverState",
        whileTap: "tapState",
    }
}

const childVariants = {
    start: { rotate: -180 },
    hoverState: { radius: 30 },
    tapState: { backgroundColor: "Red" },
}

// Override for the child
export function Child(): Override {
    return {
        variants: childVariants,
    }
}

The animate, whileHover, and whileTap properties are only set on the parent; all that the child needs is a set of (identically named) variants for this to work.

The parent’s "start" animation is a rotate to 180, but the child rotates to -180. Because of the child’s counterclockwise rotation, it doesn’t seem to rotate at all.

Note: In the parent’s override, I wrote the variants inline (instead of in a separate const object).

Orchestration

You can orchestrate child animations with these transition settings:

• with delayChildren, you insert a delay between the parent and child animations;
• with staggerChildren, you add delays between the children animations themselves;
• with staggerDirection, you decide which child to start with;
• and with when, you can have the parent animate after the children.

This next example has three child frames. Because of the delayChildren setting, the child animations start 0.2 seconds after the parent, and between the child animations is also a staggerChildren delay of 0.2 seconds.

// Override for the parent
export function Parent(): Override {
    return {
        variants: {
            initial: { skewX: -10, opacity: 0 },
            start: { skewX: 0, opacity: 1 },
            hoverState: { scale: 1.05 },
            tapState: {},
        },
        initial: "initial",
        animate: "start",
        whileHover: "hoverState",
        whileTap: "tapState",
        transition: {
            delayChildren: 0.2,
            staggerChildren: 0.2,
        },
    }
}

// Override for the children
export function Children(): Override {
    return {
        variants: {
            initial: { x: 50, opacity: 0, backgroundColor: "#fa2" },
            start: { x: 0, opacity: 1 },
            tapState: { backgroundColor: "Red" },
        },
    }
}

Note: Only the parent has a "hoverState" variant label.

And also, the parent doesn’t have a "tapState" animation (there’s an empty {} object), but by setting a whileTap for the parent, the children do have one (with the same staggerChildren delay between them).

📑 Orchestration, delayChildren, staggerChildren, staggerDirection, when

Initial

One more thing about this last example: It uses the initial property, which lets you define how a frame should look when it appears.

initial accepts the same kind of values as animate, whileTap, etc. And as you can see, it also accepts variant labels.

It’s instrumental when you want an animation to start from opacity: 0 without having to dial down the frame’s opacity on the canvas.

📑 initial