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

Shutters

Shutters Icon
Shutters Icon
Shutters Icon

Shutters bring a dynamic visual experience to your work. It simulates the dynamic process of blinds flipping, allowing the audience to see the blades flip one by one to reveal the complete work. Shutters provide a delicate unveiling process for your work, and it is especially suitable for showcasing products and scenes, bringing a unique visual charm to your creations.

Copy Component

Property Control

Blade: Column (Number: 1 - 100)

Sets the number of columns of shutter blades. Higher values create a more refined vertical division effect.

Blade: Row (Number: 1 - 100)

Controls the number of rows of shutter blades. Higher values result in more horizontal divisions.

Blade: Reverse (Number: Yes/No)

Adjusts the animation direction of the blades. When enabled, the blades will flip from left to right.

Blade: Ease (Enum)

Adds an easing effect to each blade animation.

Direction (Enum: TL/TR/BL/BR)

The starting position of the animation. The animation will start from the selected corner (Top Left/Top Right/Bottom Left/Bottom Right) and proceed diagonally.

Overlap (Number: 0 - 1)

Controls the overlap of the blade animations. Larger values will cause more blades to start animating simultaneously.

Perspective (Number: 0 - 1)

Adjusts the intensity of the perspective effect on the blades. Larger values result in a more pronounced perspective distortion.

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.

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

10, 10

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

10, 10

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

10, 10

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

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.

Maintain Effects
after the transition.

Variant 1

Variant 2

Variant 3

Photo

by

Anni Roenkae

Variant 1

Variant 2

Variant 3

Photo

by

Anni Roenkae

Reveals cool WebGL Effects Components for Framer.