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
• Initial
• Including transition settings
• Initial: false

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 tap gestures.

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

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:

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

Initial

Say I would like the frame to fade in when it first appears. We know how to do that: You just add a standard animate that changes the opacity:

export function Fade_In(): Override {
    return {
        animate: { opacity: 1 },
        whileHover: { radius: 75 },
        whileTap: { backgroundColor: "Gold" },
    }
}

… and then, because the frame should initially be invisible, you change its opacity on the canvas to zero.

But it’s annoying to have to hide frames on the canvas. You might forget they’re even there!

There’s a solution, though. With the initial property, you can define which values the frame should animate from.

export function Initial(): Override {
    return {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        whileHover: { radius: 75 },
        whileTap: { backgroundColor: "Gold" },
    }
}

(Hit to see that fade-in animation again.)

📑 initial

Including transition settings

You know that you can set a frame’s animation options with transition. But our frame now has three animations, what if we only want to slow down the animate animation?

For this, you can include a transition object directly with the animation:

export function Including_Transition_settings(): Override {
    return {
        initial: { opacity: 0 },
        animate: { opacity: 1, transition: { duration: 1 } },
        whileHover: {
            backgroundColor: "Gold",
            transition: { ease: "easeInOut", yoyo: Infinity },
        },
        whileTap: { backgroundColor: "Orange" },
    }
}

The frame’s fade-in animation will now last 1 second, and the whileHover is changed to a repeating yoyo animation with an "easeInOut" curve.

This kind of included transition settings will override the global settings you might have defined on the frame’s transition property.

Initial: false

One more thing about initial: Setting it to false will cancel the animate animation.

export function Initial_false(): Override {
    return {
        initial: false,
        animate: { rotate: 45 },
        whileHover: { radius: 75 },
        whileTap: { backgroundColor: "Gold" },
    }
}

In this case, the frame will not rotate to 45 degrees, it’ll just be displayed already rotated, without animation.

Naturally, when you comment out the initial: false, it will animate :

export function Initial_false(): Override {
    return {
        // initial: false,
        animate: { rotate: 45 },
        whileHover: { radius: 75 },
        whileTap: { backgroundColor: "Gold" },
    }
}

But why would you even use this? You could instead delete that animate line and just rotate the frame on the canvas.

Further ahead, you’ll see that you don’t need to animate to fixed, pre-defined values. You can animate to a dynamic value provided by one of the hooks, and with initial: false, you can then suppress all initial animations, whatever that dynamic value might be. There’s an example of this in The useCycle() Hook.

📑 initial