FadeContent GSAP · ScrollTrigger

往下滚

内容不该
一下子全在那儿

十种进场,各走各的:有的只是淡,有的先虚后实,有的从一张灰片里显影, 还有的从噪点里一块块长出来。

01

fade

默认的一种。透明度 0 到 1,没有别的花样。

effect="fade"

01 / fade

淡

最克制的一种:观众注意不到“动画”,只记得内容已经在那儿了。
02

blur

和 fade 同时跑,只是起手带一层模糊,落定时散开。

blur={12}

02 / blur

晕

眼睛先感到“远处有东西”,过了一会儿才看清是什么。
03

focus

模糊之外还带一点缩放:从 0.97 推回 1,像镜头对上焦。

effect="focus"

03 / focus

准

缩放幅度很小,但那一推一收让“对上焦”这件事有了方向感。
04

develop

从灰度、低对比显影到彩色,像相纸在药水里慢慢浮出画面。

effect="develop"

04 / develop

影

同一张图,先在灰里出现,再把颜色交出来。
05

dissolve

造一张 SVG 噪点遮罩,含 alpha 用一条 S 曲线推过去,边缘被啃得毛毛的。

effect="dissolve"

05 / dissolve

化

不是整体变透明,是从噪点的缝隙里一点点透出来。
06

mist

同一个遮罩,频率压到最低、叠三层噪声、再加 10px 模糊。

effect="mist"

06 / mist

雾

边界不再是一道斜着扫过去的前沿,而是一整片慢慢变浓。
07

pixel

噪点先被铺成方块再放大,于是遮罩是一格一格的,元素像被逐块点亮。

effect="pixel"

07 / pixel

格

方块大小按元素的面积算:块越大越像低分辨率的开场。
08

stagger

把一个容器的子元素排开,每张错 0.12 秒。父元素本身不参与动画。

stagger={0.12}

01先
02后
03再
09

scrub

不播时间线,直接把进度绑在滚动位置上:往回滚,它就退回去。

scrub={0.6}

这段话的浓淡
跟着你的滚动条走。

把页面往回拉一点,它就退回去一点。
10

exit

进来看得见,滚过头它自己退场 —— 时间线反向播回去。

exit

10 / exit

散

往上滚回去,它还会再进来一次 —— 这一个是双向的。
继续滚 —— 上面那块会退场