How to Create a Tricky Offset Y Setup in Framer

How to Create a Tricky Offset Y Setup in Framer

  • Guide

  • Offset Y
  • Setup
  • Guide

  • Offset Y
  • Setup
  • Guide

  • Offset Y
  • Setup

How to Create a Tricky Offset Y Setup in Framer

In this Framer blog, I'm teaching you how to become a true Framer magician by bending the platform's features in creative ways. You'll learn how to achieve "impossible" effects by combining basic features in unexpected ways. Through practical examples like responsive hover animations, you'll discover how to push Framer beyond its apparent limitations - all without touching code.

image of Nandi Muzsik

Posted by

Nandi

Offset Y axis trick diagram with intersecting arrows
Offset Y axis trick diagram with intersecting arrows
Offset Y axis trick diagram with intersecting arrows

Table of contents

The problem

You’d think moving a button up on hover would be dead simple in Framer, right? Just add a hover state and offset the Y position. Done.

The problem

You’d think moving a button up on hover would be dead simple in Framer, right? Just add a hover state and offset the Y position. Done.

The problem

You’d think moving a button up on hover would be dead simple in Framer, right? Just add a hover state and offset the Y position. Done.

Ideal button up hover animation.

Ideal button up hover animation.

Ideal button up hover animation.

Well… not quite. In this tutorial, I’ll show you a surprisingly clever way to create a responsive Y-axis offset animation in Framer, without breaking your layout or sacrificing responsiveness.

In most design tools, you’d expect to be able to apply a hover effect and just nudge something up with an offset Y. But Framer doesn’t give us that directly.

You can wrap your button in another frame, position it absolutely, and animate it with a hover state. But the moment you turn it into a reusable component with variable label text, everything starts to break:

  • The layout isn’t responsive anymore

  • The button doesn’t resize when the text changes

  • You can’t place it cleanly in a layout next to other elements

That’s where the tricky part begins.

The goal

We want a hover animation where the button moves up slightly, but:

  • The button should remain responsive

  • It should support text label variables

  • It should work in real layouts with other elements

So let’s get clever.

Step 1: Create a responsive button stack

Start by building a basic button. Wrap it in a new frame and call that frame Button. Then, turn your button into a stack so you can use width: fit and height: fit. That way, the button will resize properly with different text labels. Once that’s done, convert it into a component and create a new hover state.

Step 2: Why depth doesn’t mean Z-axis

Framer doesn’t give you a native offset Y option in hover transforms. But it does let you animate depth, which normally moves elements closer or further along the Z-axis. So… how do we turn Z-axis movement into Y-axis animation? With a 3D trick.

Step 3: The 3D rotation hack

Here’s where the magic happens.

  • Wrap your button content in another frame (we’ll call this one Content 2)

  • Set both Content 2 and the original content to fit-content

  • On Content 2, apply a 3D rotation on the X-axis: -90°

  • On the inner content, apply the opposite rotation: +90°

  • Then, enable preserve-3D on the Content 2 wrapper

What this does is rotate the entire 3D space, so now when you animate depth, it behaves like movement on the Y-axis. Yup, your depth control has been hijacked to act like an offset Y.

Step 4: Animate with depth

In your component’s hover state:

  • Select the content layer

  • Go to Transform → Depth

  • Set it to something like -10

You’ll see your button move upward as if you’re animating offset Y. And the best part? It’s fully responsive, variable-friendly, and layout-safe.

Well… not quite. In this tutorial, I’ll show you a surprisingly clever way to create a responsive Y-axis offset animation in Framer, without breaking your layout or sacrificing responsiveness.

In most design tools, you’d expect to be able to apply a hover effect and just nudge something up with an offset Y. But Framer doesn’t give us that directly.

You can wrap your button in another frame, position it absolutely, and animate it with a hover state. But the moment you turn it into a reusable component with variable label text, everything starts to break:

  • The layout isn’t responsive anymore

  • The button doesn’t resize when the text changes

  • You can’t place it cleanly in a layout next to other elements

That’s where the tricky part begins.

The goal

We want a hover animation where the button moves up slightly, but:

  • The button should remain responsive

  • It should support text label variables

  • It should work in real layouts with other elements

So let’s get clever.

Step 1: Create a responsive button stack

Start by building a basic button. Wrap it in a new frame and call that frame Button. Then, turn your button into a stack so you can use width: fit and height: fit. That way, the button will resize properly with different text labels. Once that’s done, convert it into a component and create a new hover state.

Step 2: Why depth doesn’t mean Z-axis

Framer doesn’t give you a native offset Y option in hover transforms. But it does let you animate depth, which normally moves elements closer or further along the Z-axis. So… how do we turn Z-axis movement into Y-axis animation? With a 3D trick.

Step 3: The 3D rotation hack

Here’s where the magic happens.

  • Wrap your button content in another frame (we’ll call this one Content 2)

  • Set both Content 2 and the original content to fit-content

  • On Content 2, apply a 3D rotation on the X-axis: -90°

  • On the inner content, apply the opposite rotation: +90°

  • Then, enable preserve-3D on the Content 2 wrapper

What this does is rotate the entire 3D space, so now when you animate depth, it behaves like movement on the Y-axis. Yup, your depth control has been hijacked to act like an offset Y.

Step 4: Animate with depth

In your component’s hover state:

  • Select the content layer

  • Go to Transform → Depth

  • Set it to something like -10

You’ll see your button move upward as if you’re animating offset Y. And the best part? It’s fully responsive, variable-friendly, and layout-safe.

Well… not quite. In this tutorial, I’ll show you a surprisingly clever way to create a responsive Y-axis offset animation in Framer, without breaking your layout or sacrificing responsiveness.

In most design tools, you’d expect to be able to apply a hover effect and just nudge something up with an offset Y. But Framer doesn’t give us that directly.

You can wrap your button in another frame, position it absolutely, and animate it with a hover state. But the moment you turn it into a reusable component with variable label text, everything starts to break:

  • The layout isn’t responsive anymore

  • The button doesn’t resize when the text changes

  • You can’t place it cleanly in a layout next to other elements

That’s where the tricky part begins.

The goal

We want a hover animation where the button moves up slightly, but:

  • The button should remain responsive

  • It should support text label variables

  • It should work in real layouts with other elements

So let’s get clever.

Step 1: Create a responsive button stack

Start by building a basic button. Wrap it in a new frame and call that frame Button. Then, turn your button into a stack so you can use width: fit and height: fit. That way, the button will resize properly with different text labels. Once that’s done, convert it into a component and create a new hover state.

Step 2: Why depth doesn’t mean Z-axis

Framer doesn’t give you a native offset Y option in hover transforms. But it does let you animate depth, which normally moves elements closer or further along the Z-axis. So… how do we turn Z-axis movement into Y-axis animation? With a 3D trick.

Step 3: The 3D rotation hack

Here’s where the magic happens.

  • Wrap your button content in another frame (we’ll call this one Content 2)

  • Set both Content 2 and the original content to fit-content

  • On Content 2, apply a 3D rotation on the X-axis: -90°

  • On the inner content, apply the opposite rotation: +90°

  • Then, enable preserve-3D on the Content 2 wrapper

What this does is rotate the entire 3D space, so now when you animate depth, it behaves like movement on the Y-axis. Yup, your depth control has been hijacked to act like an offset Y.

Step 4: Animate with depth

In your component’s hover state:

  • Select the content layer

  • Go to Transform → Depth

  • Set it to something like -10

You’ll see your button move upward as if you’re animating offset Y. And the best part? It’s fully responsive, variable-friendly, and layout-safe.

Adjusting depth.

Adjusting depth.

Adjusting depth.

Why this works

This whole trick is about understanding how Framer’s 3D transforms work, and using them to sidestep the platform’s limitations.

By rotating the coordinate space, you turn depth (Z) into vertical motion (Y). And thanks to preserve-3D, it still renders correctly. So instead of fighting the tool, you bend the rules creatively.

Final thoughts

Sometimes Framer doesn’t have the feature you need. And that’s okay. Because with a little creativity (and maybe some 3D wizardry), you can still get the exact result you want, without code.

If you want to sharpen your skills even more, I’ve got a whole tutorial on How to become a Framer magician. This tricky offset Y setup is just one example of how you can outsmart the limits of Framer by combining stacks, transforms, and clever layout logic.

Why this works

This whole trick is about understanding how Framer’s 3D transforms work, and using them to sidestep the platform’s limitations.

By rotating the coordinate space, you turn depth (Z) into vertical motion (Y). And thanks to preserve-3D, it still renders correctly. So instead of fighting the tool, you bend the rules creatively.

Final thoughts

Sometimes Framer doesn’t have the feature you need. And that’s okay. Because with a little creativity (and maybe some 3D wizardry), you can still get the exact result you want, without code.

If you want to sharpen your skills even more, I’ve got a whole tutorial on How to become a Framer magician. This tricky offset Y setup is just one example of how you can outsmart the limits of Framer by combining stacks, transforms, and clever layout logic.

Why this works

This whole trick is about understanding how Framer’s 3D transforms work, and using them to sidestep the platform’s limitations.

By rotating the coordinate space, you turn depth (Z) into vertical motion (Y). And thanks to preserve-3D, it still renders correctly. So instead of fighting the tool, you bend the rules creatively.

Final thoughts

Sometimes Framer doesn’t have the feature you need. And that’s okay. Because with a little creativity (and maybe some 3D wizardry), you can still get the exact result you want, without code.

If you want to sharpen your skills even more, I’ve got a whole tutorial on How to become a Framer magician. This tricky offset Y setup is just one example of how you can outsmart the limits of Framer by combining stacks, transforms, and clever layout logic.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • "Liquid Glass" button with glossy, translucent effect over a background of yellow flowers

    How to Create Liquid Glass in Framer

    Guide

    "Liquid Glass" button with glossy, translucent effect over a background of yellow flowers

    How to Create Liquid Glass in Framer

    Guide

    "Liquid Glass" button with glossy, translucent effect over a background of yellow flowers

    How to Create Liquid Glass in Framer

    Guide

  • Comparison of two image containers in Framer—one cropped and one preserving the original aspect ratio

    How to Keep Aspect Ratio of the Uploaded Image in Framer CMS

    Guide

    Comparison of two image containers in Framer—one cropped and one preserving the original aspect ratio

    How to Keep Aspect Ratio of the Uploaded Image in Framer CMS

    Guide

    Comparison of two image containers in Framer—one cropped and one preserving the original aspect ratio

    How to Keep Aspect Ratio of the Uploaded Image in Framer CMS

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback