Animation
Interactive 3D Hero Animation in Framer
This is an interactive 3D hero animation in Framer, recreated based on the work by Vivid Motion. It uses my 3D Look component and the amazing 3D transform feature in Framer. It's crazy that this is possible without any coding. Feel free to remix the project to see how it's built and play around with it.
Created by
About the resource
Creating an interactive 3D hero animation in Framer is simpler than you might think, thanks to its no-code capabilities. Yes, I know it's crazy that we can set this up without needing Blender or any other 3D modeling software.
The setup is pretty similar to some other resources I've shared already. We start by creating a circle of images using "Arm" frames, placing two images in each—one on the right side of the frame and the other on the left. By duplicating these arms and rotating them around with 3D transforms, we get a full circle or a carousel.
About the resource
Creating an interactive 3D hero animation in Framer is simpler than you might think, thanks to its no-code capabilities. Yes, I know it's crazy that we can set this up without needing Blender or any other 3D modeling software.
The setup is pretty similar to some other resources I've shared already. We start by creating a circle of images using "Arm" frames, placing two images in each—one on the right side of the frame and the other on the left. By duplicating these arms and rotating them around with 3D transforms, we get a full circle or a carousel.
About the resource
Creating an interactive 3D hero animation in Framer is simpler than you might think, thanks to its no-code capabilities. Yes, I know it's crazy that we can set this up without needing Blender or any other 3D modeling software.
The setup is pretty similar to some other resources I've shared already. We start by creating a circle of images using "Arm" frames, placing two images in each—one on the right side of the frame and the other on the left. By duplicating these arms and rotating them around with 3D transforms, we get a full circle or a carousel.
Multiple "Arm" frames rotated in 3D space make up a full circle.
Multiple "Arm" frames rotated in 3D space make up a full circle.
Multiple "Arm" frames rotated in 3D space make up a full circle.
Maybe it's a bit easier to understand from the image above, seeing this scene a little bit from the top, with an "Arm" highlighted in blue.
Once we have these arms wrapped in a common frame called "Carousel," we can connect it to a custom component called "3D Look" that you can find in the remix file. Just go to the assets panel and look for "3D Look" on the left.
Maybe it's a bit easier to understand from the image above, seeing this scene a little bit from the top, with an "Arm" highlighted in blue.
Once we have these arms wrapped in a common frame called "Carousel," we can connect it to a custom component called "3D Look" that you can find in the remix file. Just go to the assets panel and look for "3D Look" on the left.
Maybe it's a bit easier to understand from the image above, seeing this scene a little bit from the top, with an "Arm" highlighted in blue.
Once we have these arms wrapped in a common frame called "Carousel," we can connect it to a custom component called "3D Look" that you can find in the remix file. Just go to the assets panel and look for "3D Look" on the left.
Connecting the "Carousel" to the "3D Look" component.
Connecting the "Carousel" to the "3D Look" component.
Connecting the "Carousel" to the "3D Look" component.
What this component does is make our 3D scene interactive. It has multiple settings on the right panel as component properties. By default, it makes the scene follow our cursor, but we can enable dragging as well, so the carousel becomes draggable. We can also set a rotation limit on the X axis, so we'll only be able to rotate it left and right, without moving it up and down.
What this component does is make our 3D scene interactive. It has multiple settings on the right panel as component properties. By default, it makes the scene follow our cursor, but we can enable dragging as well, so the carousel becomes draggable. We can also set a rotation limit on the X axis, so we'll only be able to rotate it left and right, without moving it up and down.
What this component does is make our 3D scene interactive. It has multiple settings on the right panel as component properties. By default, it makes the scene follow our cursor, but we can enable dragging as well, so the carousel becomes draggable. We can also set a rotation limit on the X axis, so we'll only be able to rotate it left and right, without moving it up and down.
The properties of the "3D Look" component in Framer.
The properties of the "3D Look" component in Framer.
The properties of the "3D Look" component in Framer.
