Component
3D Image Scan Effect for Framer
Created by
About the resource
Using this component is super easy. You can simply copy and paste it into your project and use the right properties panel for customization.
Some of the interesting things you can do with the component is:
Enabling hover interaction so the effect plays as you’re hovering across the element
There are also two built in effect types you can choose from
In the animation settings you can also set the effect to loop, so it plays continuously forever
About the resource
Using this component is super easy. You can simply copy and paste it into your project and use the right properties panel for customization.
Some of the interesting things you can do with the component is:
Enabling hover interaction so the effect plays as you’re hovering across the element
There are also two built in effect types you can choose from
In the animation settings you can also set the effect to loop, so it plays continuously forever
About the resource
Using this component is super easy. You can simply copy and paste it into your project and use the right properties panel for customization.
Some of the interesting things you can do with the component is:
Enabling hover interaction so the effect plays as you’re hovering across the element
There are also two built in effect types you can choose from
In the animation settings you can also set the effect to loop, so it plays continuously forever
The properties of the 3D image scan component.
The properties of the 3D image scan component.
The properties of the 3D image scan component.
There is an image property though called “Depth” that could look a bit intimidating. What it is and what should you upload there?
Well, it’s literally the depth map of your original image that you might have uploaded to the image field. This depth map is used for creating this cool scan animation.
Quick tip: you can experiment with setting the depth image resolution to "Auto (Lossless)" for the best effect. This prevents the depth map from getting pixelated and potentially can result in a smoother effect.
But where can you generate a depth map for your image?
I found one free website where (after singing up) you can quickly generate depth for any image.
So you can use this, or any other depth map generator you might find online. You can also experiment with simple black and white versions of images since I’m pretty sure that will also result in a cool looking effect.
There is an image property though called “Depth” that could look a bit intimidating. What it is and what should you upload there?
Well, it’s literally the depth map of your original image that you might have uploaded to the image field. This depth map is used for creating this cool scan animation.
Quick tip: you can experiment with setting the depth image resolution to "Auto (Lossless)" for the best effect. This prevents the depth map from getting pixelated and potentially can result in a smoother effect.
But where can you generate a depth map for your image?
I found one free website where (after singing up) you can quickly generate depth for any image.
So you can use this, or any other depth map generator you might find online. You can also experiment with simple black and white versions of images since I’m pretty sure that will also result in a cool looking effect.
There is an image property though called “Depth” that could look a bit intimidating. What it is and what should you upload there?
Well, it’s literally the depth map of your original image that you might have uploaded to the image field. This depth map is used for creating this cool scan animation.
Quick tip: you can experiment with setting the depth image resolution to "Auto (Lossless)" for the best effect. This prevents the depth map from getting pixelated and potentially can result in a smoother effect.
But where can you generate a depth map for your image?
I found one free website where (after singing up) you can quickly generate depth for any image.
So you can use this, or any other depth map generator you might find online. You can also experiment with simple black and white versions of images since I’m pretty sure that will also result in a cool looking effect.
