返回动画
InteractiveIconMorph 交互式图标形变动画
从 BenjaminOddou/portfolio项目中提取, 实验之后收藏进来的交互式菜单图标动画, 鼠标悬停时用 GSAP 驱动 SVG 路径形变, 使用了GSAP的MorphSVG插件,并配合环形文字旋转。感觉好看的底部社交图标。
WaveReveal + Logo Stroke 波浪揭示动画
从 BenjaminOddou/portfolio项目中提取, 进行实验收进来的预加载动画展示版, 用stroke-dasharray + stroke-dashoffset 做Logo 先做描边和填充, 再由GSAP控制波浪形 SVG 推进完成转场。适合网站一开始进入加载资源的时候的预加载动画。
Plum Growth 梅花生长动画
动画来自 Anthony Fu 老师 2022 年的直播回放教学,他在博客中也使用了此动画,地址:https://antfu.me/。动画单纯使用 Canvas 画图,构造一棵二叉树,每次通过广度优先的方式生长枝条,左右枝条的生长概率均为 50%。
