建站纪事 / 01/2026 · 09 · 23/5 分钟阅读
让首屏动起来,同时站得住
给标语加上悬停起伏、给弹簧线和花朵加上循环动效,并在过程中修掉两处只在浏览器里现形的排版问题。
MotionGSAPTypography
01
装饰要有一个坐标系
弹簧线原本用百分比定位。文字按视口宽度缩放,百分比锚点按容器缩放,两者比例不同——换个窗口宽度,装饰就压到了别的字母上。现在行容器收缩到文字实际宽度,装饰锚在最后一个字母右侧,尺寸用 em 跟着字号走。
02
裁切层会吃掉字母的尾巴
逐字入场靠「裁切层 + 内层字母」实现,裁切层要留一点底部空白。之前给的是 0.06em,对没有下伸部的字母够用,却把 y 和 g 的尾巴切平了。留白改成按字体的 descender 深度给(0.26em),入场位移同步加大,否则动画开始前会露出字头。
03
循环动效不能挤进入场
弹簧线的呼吸和花朵的自转都是无限循环,只能作为独立动画排在入场之后启动:一旦放进入场时间轴,时长被撑成无限,后面所有带负偏移的插入点都到不了,副题和按钮会静默失效。
04
给交互留一道门
入场还没播完时划过标语,悬停动画会把入场进度覆盖掉,字母冻在半空。现在入场完成前悬停不生效;悬停只动 scale、循环只动 rotate,两者互不打断。