3D Picker Wheel Interaction in Framer

3D Picker Wheel Interaction in Framer

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

Interaction

3D Picker Wheel Interaction in Framer

This is a recreation of Apple's iconic picker wheel design in Framer. I used the 3D look component to make it fully interactive, so you can actually drag and spin it around. Feel free to remix the project and see how you can build 3D interactions without touching any code.

image of Nandi Muzsik

Created by

Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design
Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design
Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

About the resource

The structure of this interaction is really similar to other stuff I've created in the past, like the 3D carousel, 3D circular animation, and the 3D hero interaction.

The most important part is setting up a structure using 3D transforms that uses arms to make a full circle. Each arm is rotated at a different value, with a text layer at the end of each arm.

We then wrap these arms in a frame and connect it to the 3D look component to make it interactive and draggable.

About the resource

The structure of this interaction is really similar to other stuff I've created in the past, like the 3D carousel, 3D circular animation, and the 3D hero interaction.

The most important part is setting up a structure using 3D transforms that uses arms to make a full circle. Each arm is rotated at a different value, with a text layer at the end of each arm.

We then wrap these arms in a frame and connect it to the 3D look component to make it interactive and draggable.

About the resource

The structure of this interaction is really similar to other stuff I've created in the past, like the 3D carousel, 3D circular animation, and the 3D hero interaction.

The most important part is setting up a structure using 3D transforms that uses arms to make a full circle. Each arm is rotated at a different value, with a text layer at the end of each arm.

We then wrap these arms in a frame and connect it to the 3D look component to make it interactive and draggable.

The circluar arm structure from a different angle.

The circluar arm structure from a different angle.

The circluar arm structure from a different angle.

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 resources

More resources

  • Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

  • Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction