Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Scan

ScanIcon
ScanIcon
ScanIcon

Scan brings a technological presentation style to your work. It first scans the edges of the content, allowing the audience to clearly see its outline. Then, the complete content gradually appears, as if being slowly analyzed by high-tech equipment. This unique presentation process adds a sense of mystery and anticipation to your work.

Copy Component

Property Control

Angle (Number: 0-360)

The angle of the animation. For example, when "Angle" is 0, the scan proceeds from top to bottom.

Edge Sensitivity (Number: 0-1)

The edge sensitivity of the media content. Higher values will make the edges appear stronger.

Tint (Color)

The edge blending color. The set color will be blended with the original media content.

The properties below will be available when you use the Nest component.

Animation Start (EventHandler: onAnimationStart)

Triggers the event when the animation starts.

Animation End (EventHandler: onAnimationEnd)

Triggered when the animation ends.

Video End (EventHandler: onVideoEnd)

Triggered when the video playback ends, this event will not be triggered when "Loop" is "Yes".

Media Loaded (EventHandler: onMediaload)

Triggered when the media is loaded.

Scan
Component
Media

Image

Video

Image

Image

Size

Fill

Angle
Edge Sensitivity
Tint

#55CCFF

Animate

Appear

Transition

Spring

Variant 1

Scan
Component
Media

Image

Video

Image

Image

Size

Fill

Angle
Edge Sensitivity
Tint

#55CCFF

Animate

Appear

Transition

Spring

Variant 1

Scan
Component
Media

Image

Video

Image

Image

Size

Fill

Angle
Edge Sensitivity
Tint

#55CCFF

Animate

Appear

Transition

Spring

Variant 1

Features

Use your favorite
Image & Video.

Trigger effects with Scroll Animation.

Interactive experience with Scroll Transform.

Interactive experience
with Scroll Transform.

Media changes with Color Themes.

Compatible with
Framer Transition Controls.

Next

Variant 1

Video

by

Yan Krukau

Variant 1

Video

by

Yan Krukau

Reveals cool WebGL Effects Components for Framer.