今日已更新 393 条资讯 | 累计 25473 条内容
关于我们

Part 2: Replacing 3.4MB video with 40kb of scripted GSAP animations: adding a camera.

/u/LordVein05 2026年05月28日 01:18 2 次阅读 来源:Reddit r/webdev

Part one hit 69K views, 250 upvotes here. The comments were better than the post. A lot of you asked about SEO, accessibility, performance, and whether GSAP is even necessary. Several pointed out the demo was missing something. You were right. Part one had a cursor clicking through scenes on a flat stage. No depth, no focus. This post adds a camera: zoom into the action on right-click, pan to follow the cursor through a save dialog, zoom into the result on the destination board, pull back and loop. Still under 40 KB. Still no video files. What part two covers: Zoom wrapper architecture — why gsap.to(frame, { scale: 1.4 }) breaks responsive scaling Pan math — the formula to center any target in the viewport at a given zoom level "Stay zoomed, pan to follow" — zoom in once, pan through the interaction, zoom out once. Not PowerPoint. Easing philosophy — why camera pans need sine.inOut , not power2.inOut , and the full easing table by motion type Cursor alive during camera moves — a frozen cursor during a zoom makes the whole thing feel mechanical. 30% drift fixes it. Graceful loop lifecycle — outro pattern instead of snap-reset SEO — every button label and heading in the demo is indexable DOM text, not a black box video Accessibility — prefers-reduced-motion support, autoAlpha for screen readers Performance — live FPS stress test you can run in your browser (8 → 24 → 48 elements with zoom + pan + stagger), not much performance drop The agent split — I wrote ~60% (the directing), an AI agent wrote ~40% (the tedious timeline code). Still a lot of manual editing, but way better than recording a video and the maintenance The full post has 4 interactive demos you can pause and inspect, including side-by-side comparisons of easing curves and cursor behavior during zooms. Full writeup with live demos: https://spanthi.com/blog/gsap-choreography-part-2 Production examples: https://costumary.com and https://costumary.com/web-clipper Skill for AI agents if anyone wants to save ti

本文内容来源于互联网,版权归原作者所有
查看原文