Scan brings a futuristic and tech-savvy presentation to your media works. This effect first performs a colorful scan along the edges of the media content, allowing viewers to clearly see the contours. Subsequently, the complete media content gradually appears, as if being slowly decoded by high-tech equipment. This unique presentation process not only captures the audience's attention but also adds a sense of mystery and anticipation to your work.
The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.
Scroll Animation
The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.
Scroll Transform
The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.
Light/Dark Theme Media
The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.
Custom Transition
The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.
Image & Video
The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.
Scroll Animation
The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.
Scroll Transform
The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.
Light/Dark Theme Media
The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.
Custom Transition
The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.
Image & Video
The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.
Scroll Animation
The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.
Scroll Transform
The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.
Light/Dark Theme Media
The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.
Custom Transition
The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.
Tips
Edge animations are always colorful, and when you set the Tint, it only changes a portion of the color in the edge animation.
Property Specification
Angle (0 -360)
Sets the direction of the scanning animation. 0 degrees indicates scanning from top to bottom, 90 degrees indicates scanning from right to left.
Edge Sensitivity (0 - 1)
Adjusts the detection sensitivity of media content edges. Higher values make edge contours more prominent.
Tint (Color)
Customizes the edge color of the scanning animation. Note that the final displayed color will be influenced by the original media content's color and may differ from the set color.
