Creating an override in Framer sounds intimidating but it's super easy— let me show you how!

In this tutorial, I will show you how you can create tons of different hover effects for your Framer projects without any prior coding knowledge or experience.

Overrides empower you to unleash the full potential of Framer, going beyond the boundaries of the interface!

By leveraging these versatile code snippets, you can take control of an element’s properties and truly customize it. Make your Framer projects stand out with powerful overrides.

1. Here is our starting code for this tutorial:

We will be using this code as our base — think of it like the ice cream and all you have to do is add the toppings.

To start, create a new override in Framer and add the code snippet below. It won't do anything right now, we will be adding our hover effects in the next step.

Apply this override code to any layer and it will allow us to create some impressive hover effects in a matter of seconds. No need for variants or pixel pushing - we can do it all with the power of simple code.

import type { ComponentType } from "react"
import { motion } from "framer-motion"

export const withHover = (Component: ComponentType): ComponentType => {
    return (props) => (
        <Component
            {...props}
            as={motion.div}
            whileHover={{
            }}
        />
    )
}

2. Let's add hover effects

In our code snippet, we have a prop that we've created whileHover={{ }}

The next step in our process is to fill this with the effect that we want to trigger while hovering over the frame that this override is applied.

For example, we can make our override skew our element on hover which would look like this:

whileHover={{
  skew: -10,
}}

Just like that we already have a working override, it's like magic! Next, let's explore other effects we can apply.

In addition to skew, there are tons of other hover effects we can use:

• scale This increases or decreases the size of the element.
  scale: 1.5

  
  

• skew This distorts the element along the X and Y axis.

  skew: -10

  
  

• rotate: This rotates the element around the Z axis (in 2D space).

  rotate: 90

  
  

• x and y: These translate (move) the element along the X and Y axis respectively. A value of 50 would move the element 50 pixels to the right (for x) or downwards (for y).

  x: 50, y: 50

  
  

• skewX and skewY: These distort the element along the X and Y axis respectively. A value of 20 would slant the element to the right (for skewX) or upwards (for skewY).

  skewX: 20, skewY: 20

  
  

• rotateZ: This is the same as rotate, but specified for the Z axis specifically.

  rotateZ: 90

  
  

• rotateX: This property rotates the element around the X-axis In the 3D space (which runs horizontally).

  rotateX: 90

  
  

• rotateY: This property rotates the element around the Y-axis In the 3D space (which runs vertically).

  rotateY: 90

  
  

• opacity: This changes the transparency of the element. A value of 0.8 would make the element 80% opaque, or 20% transparent.

  opacity: 0.8

  
  

• backgroundColor: This changes the background color of the frame.

  backgroundColor: "#00f"

  
  

• borderRadius: This sets the radius of the border. A value of "50%" would make the borders completely round, creating a circular or elliptical shape.

  borderRadius: "50%"

  
  

• scaleZ: This scales the element along the Z axis. It doesn't have an effect in 2D space, but in 3D space, it would make the element seem closer or farther away.

  scaleZ: 1.5

  
  

• originX and originY: These set the origin for transformations (like scale and rotate). A value of 0.5 would set the origin to the center of the element.

  originX: 0.5, originY: 0.5

  
  

• boxShadow: This adds a shadow to the element. "10px 10px 5px 0px rgba(0,0,0,0.75)" would add a black shadow that's offset 10px to the right and down, with a blur radius of 5px and no spread.

  boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75)"

  
  

• textShadow: This adds a shadow to the text inside the element. "2px 2px 4px rgba(0,0,0,0.5)" would add a half-transparent black shadow that's offset 2px to the right and down, with a blur radius of 4px.

  textShadow: "2px 2px 4px rgba(0,0,0,0.5)"

  
  

• borderWidth: This sets the width of the border. "5px" would set the border width to 5 pixels.

  borderWidth: "5px"

  
  

• outlineColor: This sets the color of the outline. "#00f" would set the outline color to blue.

  outlineColor: "#00f"

It's easy to add multiple effects to the same override

We can use commas to connect multiple effects to the same override.

whileHover={{
  skew: -10,
  rotate: 30,
  scale: 1.3,
}}

3. Create keyframes

Add another dimension to your transitions by replacing fixed values with keyframes. This feature lets you transition smoothly between an array of values.

To add keyframes simply add brackets then input the values you would like to transition between. For example:

whileHover={{
rotate: [0, 5, -5, 5, 0],
}}

4. Add easing and timing functions

Inside of our whileHover prop we can add a transition which allows us to control the timing functions of our animation. These controls are useful when applying keyframes because it allows us to control how our keyframes are applied.

transition: { repeat: Infinity, duration: 0.5, ease: "easeOut" },

Here are some properties that can be controlled using transition

• delay: The number of seconds to wait before starting the animation.

  delay: 1

  
  

• duration: The duration of the animation in seconds.

  duration: 2

  
  

• repeat: The number of times the animation should repeat.

  repeat: 3

  
  

• repeatType: Controls the type of repetition. Can be either "loop", "mirror", or "reverse".

  repeatType: "loop"

  
  

• ease: The easing function to use. This can be a string like "easeOut", "easeIn", "spring", etc., or an array specifying a custom cubic bezier curve.

  ease: "easeOut" or ease: [0.42, 0, 0.58, 1]

To include these properties in our code we can do so like this:

whileHover={{
  skew: [0, 5, -5, 5, 0],
  transition: { duration: 0.5, repeat: Infinity, ease: "easeIn" },
}}

5. Now mix it all together and let your creativity flow

The final step is simply adding everything we've learned into the original code between the curly brackets of whileHover{{ }}.

You can now create any effects you would like and add easing, delays, loops, keyframes, and so much more!

You now have the freedom and knowledge to create powerful overrides in Framer in only seconds! I hope you can see why this approach is more lightweight and scalable (and fun!) than relying on variants to create effects.

import type { ComponentType } from "react"
import { motion } from "framer-motion"

export const withHover = (Component: ComponentType): ComponentType => {
    return (props) => (
        <Component
            {...props}
            as={motion.div}
            whileHover={{
                skew: [0, 5, -5, 5, 0],
                scale: [1, 1.2, 1],
                backgroundColor: "green",
                transition: { duration: 0.5, repeat: Infinity, ease: "easeIn" },
            }}
        />
    )
}

⚠️ Encountered issues? Check these…

Typos in values

Ensure that you enter correct values for your properties. For example, if you're using borderRadius, the value should be a percentage (like "50%") or a pixel value (like "10px"). Entering a value like "50" without a unit of measurement would lead to unexpected results.

Incorrect use of commas (,)

When adding new effects to your override, ensure that each effect is separated by a comma. Omitting a comma can lead to errors in your code.

Misspelled or incorrect case of properties

JavaScript is case-sensitive, meaning that "rotate" and "Rotate" would be treated as different properties. Make sure you're using the correct case for your properties, and check your spelling.

Not closing brackets or braces

Leaving brackets or braces open is a common mistake. Always ensure that every open brace { or bracket ( has a corresponding closing brace } or bracket ). A missing brace or bracket could render your whole override nonfunctional.

If you keep these points in mind and double-check your work, you'll avoid the most common pitfalls and keep your Framer projects running smoothly.

That's it you've just made your first override in Framer!

I hope you found this tutorial helpful and were able to create a powerful override for your Framer project. If you did create something cool, please share it on Twitter and tag @FramerOverrides.

To explore more overrides and other powerful Framer effects, check out the Framer Overrides Library.

Happy designing! 🎉