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 为你的作品带来动感十足的视觉体验。它模拟了百叶窗翻转的动态过程,观众将看到叶片逐个翻转并来呈现完整作品。Shutters 为你的作品带来了细腻的揭示过程,它特别适用于产品与场景的展示,为你的作品带来独特的视觉魅力。

Copy Component

属性控制

Blade: Column (Number: 1 - 100)

设置百叶窗叶片的列数,较高的值会创造更细致的垂直分割效果。 

Blade: Row (Number: 1 - 100)

控制百叶窗叶片的行数,较高的值会产生更多的水平分割。 

Blade: Reverse (Number: Yes/No)

调整叶片的动画方向。启用后,叶片将从左至右翻转。

Blade: Ease (Enum)

为每个叶片动画添加缓动效果。

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

动画的起始位置。动画将从选定的角落(左上/右上/左下/右下)开始,朝对角方向进行。

Overlap (Number: 0 - 1)

控制叶片动画的重叠程度。较大的值会使更多的叶片同时开始动画。 

Perspective (Number: 0 - 1)

调节叶片的透视效果强度。较大的值会带来更明显的透视变形。

Animation Start (EventHandler: onAnimationStart)

当动画开始时触发事件。

Animation End (EventHandler: onAnimationEnd)

当动画结束时触发事件。

Video End (EventHandler: onVideoEnd)

当视频播放结束时触发事件,当 Loop 为 Yes 时,这个事件不会被触发。

Media Loaded (EventHandler: onMediaload)

当媒体载入完成时触发事件。

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

特性

随心使用你的图片或视频

使用滚动动画来触发效果

使用滚动变换创建交互式体验

使用滚动变换创建交互式体验。

跟随颜色主题切换媒体

兼容 Framer 的过渡控制器

在任意进度停止动画

下一个

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.