Component
Interactive Skeuomorphic Joystick in Framer
About the resource
To recreate this interactive skeuomorphic joystick in Framer, I started with a top frame and a bottom frame for the base, styling them with shadows and gradients for a realistic look. Inside the top frame, I placed the follow cursor wrapper and the inside holder, which contains the main joystick button.
On the button frame, I applied 3D transform properties—perspective, preserve, and a depth. Inside this button, there's an orange frame for the knob with a slightly higher depth. I also wrapped all four icons within this button frame.
Next, I created four variants for the pressed states in all four directions. For each variant, I adjusted shadows and applied 3D rotation values to enhance realism. I then connected the default state to each variant using interactions from the icon frames and linked the variants back to the default with an appear interaction and a slight delay.
About the resource
To recreate this interactive skeuomorphic joystick in Framer, I started with a top frame and a bottom frame for the base, styling them with shadows and gradients for a realistic look. Inside the top frame, I placed the follow cursor wrapper and the inside holder, which contains the main joystick button.
On the button frame, I applied 3D transform properties—perspective, preserve, and a depth. Inside this button, there's an orange frame for the knob with a slightly higher depth. I also wrapped all four icons within this button frame.
Next, I created four variants for the pressed states in all four directions. For each variant, I adjusted shadows and applied 3D rotation values to enhance realism. I then connected the default state to each variant using interactions from the icon frames and linked the variants back to the default with an appear interaction and a slight delay.
About the resource
To recreate this interactive skeuomorphic joystick in Framer, I started with a top frame and a bottom frame for the base, styling them with shadows and gradients for a realistic look. Inside the top frame, I placed the follow cursor wrapper and the inside holder, which contains the main joystick button.
On the button frame, I applied 3D transform properties—perspective, preserve, and a depth. Inside this button, there's an orange frame for the knob with a slightly higher depth. I also wrapped all four icons within this button frame.
Next, I created four variants for the pressed states in all four directions. For each variant, I adjusted shadows and applied 3D rotation values to enhance realism. I then connected the default state to each variant using interactions from the icon frames and linked the variants back to the default with an appear interaction and a slight delay.
The five variants of the interactive skeuomorphic joystick component.
The five variants of the interactive skeuomorphic joystick component.
The five variants of the interactive skeuomorphic joystick component.
