Back to Details

emilkowalski-motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Emil Kowalski Motion Follow-Up

Emil Kowalski 动效进阶技巧

Use this skill after a design artifact already exists. The goal is to make the interface feel alive without turning it into a motion demo.

请在已有设计成果的基础上使用本技巧。目标是让界面富有生命力，而非变成动效演示。

Workflow

工作流程

Inspect the current HTML, component, or selected page element before adding animation.
Pick the smallest set of motion moments that clarify state or hierarchy:
- entry reveal for the primary content
- hover / active feedback for important controls
- transition between UI states
- scroll reveal only when it helps the story
Prefer
```
transform
```
and
```
opacity
```
. Avoid animating layout properties such as
```
top
```
,
```
left
```
,
```
width
```
, or
```
height
```
.
Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics.
Add
```
prefers-reduced-motion
```
fallbacks for any automatic or scroll-linked motion.
Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.

在添加动画前，检查当前HTML、组件或选中的页面元素。
挑选最少量的动效场景，以明确状态或层级：
- 主内容的入场展示
- 重要控件的悬停/激活反馈
- UI状态间的过渡
- 仅在有助于叙事时使用滚动展示动效
优先使用
```
transform
```
和
```
opacity
```
。避免为
```
top
```
、
```
left
```
、
```
width
```
或
```
height
```
等布局属性添加动画。
在整个设计成果中使用统一的动效语言。不要混合无关的缓动效果、时长或物理特性。
为任何自动或关联滚动的动效添加
```
prefers-reduced-motion
```
降级方案。
除非用户明确要求重新设计，否则保持文案、数据和布局意图不变。

Motion Rules

动效规则

Default UI transitions should feel quick and useful: 140-220ms for most controls.
Larger page reveals can be slower, but must not block reading.
Avoid endless decorative loops unless they communicate status or progress.
Do not add custom cursors, noisy particle effects, or motion that competes with content.
Stagger only small groups. Long staggered lists make interfaces feel slow.

默认UI过渡应快捷实用：大多数控件的时长为140-220毫秒。
较大的页面展示可以稍慢，但不得阻碍阅读。
避免无意义的装饰性循环动效，除非用于传达状态或进度。
不要添加自定义光标、嘈杂的粒子效果或与内容争夺注意力的动效。
仅对小型组件组使用 stagger 效果。过长的 stagger 列表会让界面显得迟缓。

Implementation Notes

实现说明

For plain HTML, CSS keyframes and small JavaScript observers are enough.
For React or framework code, use the local stack already present in the repo.
If GSAP is available and the motion needs sequencing, pair this with
```
gsap-core
```
,
```
gsap-timeline
```
, or
```
gsap-scrolltrigger
```
.
Always clean up observers, timers, and animation instances.

对于纯HTML，CSS关键帧和小型JavaScript观察者即可满足需求。
对于React或框架代码，使用仓库中已有的本地技术栈。
如果GSAP可用且动效需要序列编排，搭配
```
gsap-core
```
、
```
gsap-timeline
```
或
```
gsap-scrolltrigger
```
使用。
务必清理观察者、计时器和动画实例。