使用 GSAP 和 Veo 3 创建 3D 滚动动画

How does the Adaline website make this awesome 3D zooming effect when I scroll? It is using a funny trick that Apple uses all the time too.

Adaline 网站在滚动时如何实现这种炫酷的 3D 缩放效果？它用的是 Apple 也经常玩的一个小把戏。

Let me show you how I recreated this effect. We’ll cover the easy way (using AI to assist) and how to implement it from scratch in code as well. Then how to make infinite variations of it with Builder.io and Veo 3:

让我展示我是如何重现这种效果的。我们将介绍简单的方法（使用 AI 辅助）以及如何从头开始用代码实现。然后，如何使用 Builder.io 和 Veo 3 创建无限变化：

Going into 2026, I do not think you should waste time coding this scaffolding by hand. You are welcome to do it if you like, but if you want an easier way you can do like I did.

进入2026年，我认为你不应该再花时间手写这些脚手架代码。如果你愿意，当然可以继续这么做；但如果你想轻松一点，可以像我一样。

I used the Builder.io Chrome extension to pull in the layout and design for the production site to be my starting point:

我使用了 Builder.io Chrome 扩展，将生产站点的布局和设计拉取进来作为起点：

The dirty secret of these types of animations is they use use a sequence of images.

这类动画的“肮脏秘密”是它们使用一系列图像。

The effect is powered by GSAP plus ScrollTrigger and a numbered sequence that we render to a canvas. Looking at their site, they have a bunch of image urls numbered -001 to 280, so heres the prompt I used:

效果由 GSAP 加 ScrollTrigger 驱动，并通过编号序列渲染到 canvas。看他们的网站，有一堆从 -001 到 280 编号的图片地址，所以我用了这样的提示：

use the gsap to create a zooming out effect on scroll. use this sequence of jpegs as your keyframes. the filenames end in numeric sequence -- follow them. this should be scroll triggered when user scrolls down the page, until the animation completes, then normal scrolling resumes. here are the keyframe jpegs from last to first. use the final three digit number to order them:
https://www.adaline.ai/sequence/16x9_281/high/graded_4K_100_gm_85_1440_3-001.jpg
...
https://www.adaline.ai/sequence/16x9_281/high/graded_4K_100_gm_85_1440_3-280.jpg

I fired that off and let the agent do its thing. The first pass got close but needed some refinement. Remember: just like working with a human, give feedback and iterate until things are the way you ...