Animation Lab

Animation Lab is a small frontend workspace for studying logo and mascot animation with GSAP.

The point is not to make a polished animation product. It is a place to take a static mark, break it into parts, and test whether the motion actually works: timing, staging, replay behavior, and how much personality the asset can carry before it becomes noisy.

What It Does

The current version is a simple preview UI. You can pick an animation study, change playback speed, and replay the timeline.

The useful part is the project structure behind it. Each study owns its markup, timeline, and source material. That keeps experiments isolated enough to throw away, but consistent enough that a good animation can be reused later.

Why I Built It

Logo animation is easy to overdo. A tiny movement can make a product feel more alive; too much movement turns into decoration that gets in the way.

I wanted a small place to test that boundary. The lab lets me work directly with SVG parts, GSAP timelines, and real project assets instead of guessing from a static design.

Engineering Shape

The app is a Vite, TypeScript, and GSAP project. It has no backend. The production build is just static files deployed to Vercel.

The important constraint is restartable timelines. Each example should be easy to load, replay, and adjust without depending on hidden page state. That makes the lab useful as a repeatable animation bench rather than a one-off demo.

tools -> 其实还么有细研究 https://gsap.com/ https://github.com/greensock https://github.com/greensock/gsap-skills