Distortion brings a wide-angle lens-like warping effect to your work, particularly suited for showcasing dynamic and dramatic pieces. It adds a unique visual impact to your images or videos, captivating the audience's attention. Whether used in artistic creations or commercial advertising, Distortion makes your work visually stand out and memorable.
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.
Target Animation
The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.
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.
Target Animation
The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.
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.
Target Animation
The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.
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
Distortion simulates the effect of lens distortion, when you set Distortion to a positive number you can get a pincushion distortion effect, while setting it to a negative number you can get a barrel distortion effect. Also, set Size to Scale for more noticeable animation.
Property Specification
Distortion (-0.2 - 1)
Controls the intensity of media distortion. Higher values increase the degree of deformation, creating a stronger perspective effect and making the media content appear to enter from a further distance.
Sharpness(1 - 10)
Enhances edge distortion effects. Higher values produce more pronounced deformation at the corners of the media, intensifying the wide-angle lens-like visual effect.
Blur (1 - 10)
Simulates lens focus effect. Increasing this value blurs the image, useful for simulating out-of-focus effects.
