Shutters

Shutters brings a dynamic visual experience to your work. This effect cleverly simulates the motion of rotating blinds, allowing viewers to see the slats gradually turn to reveal the full content. Shutters provides a delicate unveiling process for your work, making it particularly suitable for product and scene presentations. It adds a unique visual appeal to your projects, leaving a profound and unforgettable impression on the audience.

Copy Component

Component Copied

Property Controls

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

Fill

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

Fill

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Shutters
Component
Media

Image

Video

Image

Image

Size

Fill

Blade

Fill

Direction
Overlap
Perspective
Animate

Appear

Transition

Spring

Features

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.

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.

Property Specification

Blade: Column (1 - 100)

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

Blade: Row (1 - 100)

Controls the number of rows for the shutter blades. Higher values produce more horizontal divisions.

Blade: Reverse (Yes/No)

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

Blade: Ease (EaseFunction)

Add easing effect to each blade animation.

Direction (TL/TR/BL/BR)

Determines the starting position of the animation. The animation will begin from the selected corner (Top Left/Top Right/Bottom Left/Bottom Right) and progress towards the opposite diagonal.

Overlap (0 - 1)

Controls the degree of overlap in the blade animation. Higher values cause more blades to start animating simultaneously.

Perspective (0 - 1)

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

Explore the next effector.

Reeded Glass

Reeded Glass Effect Cover
Reeded Glass Effect Cover
Reeded Glass Effect Cover

Reveals cool WebGL Effects Components for Framer.