AI 摘要：这篇博文详细介绍了如何使用 GSAP (GreenSock Animation Platform) 的 ScrollTrigger 和 MotionPath 插件，实现响应式的、滚动触发的曲线路径动画。文章不仅阐述了核心的设计挑战和 Bezier 曲线原理，还提供了动态计算控制点、构建 SVG 路径、动画插值以及响应式处理的完整代码示例。更令人惊喜的是，作者还分享了一个实用的可视化配置工具，让开发者能够拖拽控制点实时调整曲线，极大地提升了开发效率和精度。最后，文章还探讨了可访问性 (Accessibility) 和生产工作流程，为读者提供了全面的解决方案。

codepen.io

Paths & Control Points

...

AI 摘要：这篇博文介绍了 Andy Clarke 开发的一款有趣的卡通标题文本生成器，它可以生成具有卡通风格的文本，并提供 CSS 代码。文章还重点介绍了其核心功能 Splinter.js，它通过包裹每个字符的 <span> 标签，并加入 ARIA 属性，在实现逐字样式控制的同时，增强了可访问性，解决了传统工具可能导致辅助技术识别障碍的问题。

AI 摘要：本文深入探讨了 CSS animation-timeline 属性中的 view() 函数，它允许开发者创建基于元素在滚动容器（scrollport）中可见性（visibility）的动画。文章通过一个图片轮播（carousel）示例，详细演示了如何结合传统 CSS 动画、关键帧（keyframes）和 view() 函数，实现元素进入/退出视图时的缩放、模糊等动态效果。此外，文章还比较了 view() 与 scroll() 函数的区别，并介绍了 view() 函数的轴（axis）和插入（inset）参数，以及 animation-range 属性，帮助读者更精细地控制动画的触发时机和范围，为制作交互式滚动动画提供了实用的指导。

1. view() 函数简介与核心概念
• animation-timeline 属性接受 view() 函数，实现基于元素可见性的动画。
• 类比 JavaScript 的 Intersection Observer，动画随元素进入和退出滚动视口（scrollport）而触发。
• 示例：图片轮播中，图片在中间时清晰放大，在边缘时模糊缩小。
2. 搭建基本布局
• 创建一个 <main> 元素作为 carousel 容器。
• 使用 flexbox 使图片横向排列，并设置 overflow-x: auto 实现滚动。
• 定义 carousel-slide 元素作为图片项，设置其宽度为容器的 1/3，实现一次显示三张图片。
3. 实现滚动与滚动捕捉（Scroll Snapping）
• 在 carousel 容器上设置 scroll-snap-type: x mandatory 实现滚动捕捉。
• 使用 scroll-behavior: smooth 实现平滑滚动（可选）。
• 设置 scrollbar-width: none 隐藏滚动条（可选）。
• 为 carousel-slide 设置 scroll-snap-align: center，确保图片居中对齐。
4. 创建基于视图的动画
• 定义 slide 关键帧动画，实现图片在不同阶段的缩放、圆角和模糊效果。
• 将 slide 动画应用于 carousel-slide 元素。
• 使用 animation-timeline: view(inline) 将动画绑定到元素的视图时间线。
• 强调 animation-timeline 需单独声明在 animation 速记属性之后，以避免被覆盖。
5. view() 与 scroll() 函数的比较
• view() 函数创建基于元素在容器中可见性的视图进度时间线，适用于元素特定的显示效果。
• scroll() 函数创建基于容器滚动位置的滚动进度时间线。
• view() 更适合实现当特定元素滚动到视口时触发的动画。
6. view() 函数的参数与 animation-range 属性
• view() 接受 axis （block, inline, x, y）和 inset 参数。
• inset 参数定义滚动视口边缘的偏移量，精确控制动画触发范围。
• animation-range 属性进一步控制动画的开始和结束点，可使用 entry、exit、cover、contain 等关键词。
• 示例：通过 inset 控制动画在元素从底部进入滚动视口时才开始。
7. 创意轮播动画拓展
• 鼓励探索更多 CSS 属性的动画可能性，如背景位置（background position）动画，创造独特的轮播效果。
• 提及注册 CSS 属性（registered CSS properties）可以使更多属性动画化。

CSS-Tricks

Creating Scroll-Based Animations in Full view() | CSS-Tricks

It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.

Anderson Mancini(@Andersonmancini): 🎵 太阳出来了 ☀️
我终于完成了将我的“终极镜头光晕”移植到 #threejs WebGPU 的工作。性能简直令人难以置信，因为现在 threejs 已经将遮挡查询直接集成到了渲染管线中。如果你需要知道某个物体是否被遮挡，只需直接向 threejs 查询即可。文档中有示例。
这样一来，我就不再需要光线投射器来检测遮挡了，这就是性能大幅提升的原因。
如果您想查看结果： https://planpoint-webgpu.vercel.app