Maggie Appleton 写设计、人类学和智能体界面时，习惯先画清楚隐喻，再谈工具。把「GreenSock Animations with React Hooks」整理成可阅读的中文笔记：问题在哪、界面默认会把人带去哪、落地时该改什么。原站导航、评论回响和广告已去掉。

React, Meet GreenSock

Using the GreenSock web animation library (also known as gsap) in vanilla JavaScript isn’t too complex. But when we want it to play nicely with a frontend framework like React, we run into some finicky issues.

This guide is specifically about using React Hooks with GreenSock, as many of the existing guides only explain how to set it up with the old style of class components.

Bring in the React Hooks

This isn’t an introduction to the GreenSock library itself – head over to my post on The Bare Essentials of Greensock for that.

The issue with combining these two libraries is that React acts as a DOM interloper – it sits between the code we write and the DOM, managing it for us.

Getting Setup

React builds it’s own internal “tree” of DOM nodes based off our code, and only updates the actual DOM as needed (a concept previously known as the React Virtual DOM ) The React team has gone off the term of the virtual DOM and prefer to talk about the render tree . Potatoes, potataos. For more on how the virtual DOM works, I have an illustrated guide

Meanwhile, the GreenSock library usually works by directly animating our DOM elements. Perhaps you can sense the tension in the room…

Building our Animation Component

Since the GreenSock library needs access to the DOM in order to animate it, we need to tell React about our Greensock animations. Otherwise the two end up in awkward arguments that can end in tears (primarily mine).

There’s two essential React hooks we’ll use to connect our React code to our Greensock code: useRef and useEffect

Adding the useRef Hook

useRef lets us access and directly target our DOM nodes

useEffect lets us to perform side effects – any functions or data requests that we want to run after rendering the component to the DOM

Adding the useEffect Hook

If you’re not completely comfortable with React Hooks yet and those technical explanations mean nothing to you, don’t worry we’re going to slowly walk through this. With illustrations. Because who the fork properly understands “side effects” ?

We first need to run yarn install gsap or npm install gsap into our React project repo gsap is short for GreenSock Animation Platform and it’s the way we reference the Greensock library in all our code sytax

落地时建议先做的 5 件事

1. 先写清这个工具在强化思考还是在替人思考。
2. 默认交互不要只会谄媚：该追问、该给反例、该要求证据。
3. 智能体界面要露出推理步骤，而不是只给一个光滑答案。
4. 知识发布用可生长的笔记，而不是一次性营销长文。
5. 改产品前先画隐喻：用户以为自己在做什么，系统实际在做什么。

和智能体产品怎么接

龙虾PRO做 OpenClaw 落地时，最该从这类笔记里拿走的是「别把聊天框当唯一界面」。数字员工要能追问、能验证、能把过程摊开，而不是只负责说好话。

本文侧重全链路风控方法论。落地时请用自身业务单据做回放验证，不要把示例阈值直接当生产策略。 相关：风控体检 · 方案资源