# end: () => "+=" + scrollDistance có nghĩa gì? (ok)

### ✅ **1. Cú pháp gốc**

```js
end: () => "+=" + scrollDistance
```

#### 🔧 **Ý nghĩa**

* `end` có thể nhận **function** thay vì string cố định.
* `() => "+=" + scrollDistance` là **arrow function** trả về một string.

***

#### 📝 **Cụ thể**

🔹 **"+=" + scrollDistance**

Ví dụ nếu `scrollDistance = 2000` thì

➡️ `"+=2000"`

***

#### ⚠️ **2. Vậy "+=" có nghĩa gì?**

Trong GSAP ScrollTrigger:

✅ **`"+=value"`**

* Nghĩa là **kéo dài end position thêm value pixels từ start**.
* Tương tự như **“start position + value”**.

***

#### ✨ **Example dễ hiểu**

```js
ScrollTrigger.create({
  trigger: ".section",
  start: "top top",
  end: "+=1000"
});
```

✅ ScrollTrigger sẽ:

* **Start:** khi `.section` top chạm top viewport
* **End:** kéo dài thêm 1000px scroll nữa

***

#### 🔧 **3. Tại sao dùng function `() =>` ?**

🔹 Vì **scrollDistance được tính dynamic**, ví dụ:

```js
const scrollWidth = container.scrollWidth;
const viewportWidth = window.innerWidth;
const scrollDistance = scrollWidth - viewportWidth;
```

✅ Nếu dùng static:

```js
end: "+=" + scrollDistance
```

Sẽ lỗi nếu `scrollDistance` chưa được tính xong trước khi ScrollTrigger khởi tạo.

***

🔹 Dùng function đảm bảo **ScrollTrigger đọc giá trị mới nhất khi refresh**:

```js
end: () => "+=" + scrollDistance
```

✅ Function sẽ **execute mỗi lần ScrollTrigger refresh**, đảm bảo correct value.

***

#### 🎯 **4. Tóm tắt**

| Cú pháp                            | Ý nghĩa                                                                  |
| ---------------------------------- | ------------------------------------------------------------------------ |
| `end: "+=1000"`                    | End cách start 1000px                                                    |
| `end: () => "+=" + scrollDistance` | End dynamic dựa trên scrollDistance, đảm bảo chạy sau khi tính toán xong |

***

💡 **Tip:**\
Khi tạo **horizontal scroll gallery hoặc dynamic layout**, luôn dùng **function trong end/start** để tránh lỗi khi resize hoặc load data sau.

***

Nếu cần, tôi có thể viết **full bài học về ScrollTrigger start, end, relative values, và function callback** cho lộ trình mastering GSAP tuần này của bạn.
