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.



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.