Dev GSAP Cho Studio: Dự Án Mark Woodland

Khi một studio đưa cho bạn một design direction đã hoàn thiện và nói "làm cho nó sống dậy, và bảo đảm nó luôn online", thực ra họ đang cần hai người trong một: một kỹ sư motion và một người làm chủ server. Đó là vai trò tôi đảm nhận với tư cách dev GSAP cho studio — và website Mark Woodland là một ví dụ rõ ràng. Uncommon Studio làm chủ phần thiết kế và art direction; tôi build front-end motion, dựng phần video, và setup server cùng deploy để nó lên sóng và luôn mượt. Bài này mổ xẻ dự án từ phía developer: một studio thực sự nhận được gì khi đưa một chuyên gia vào lo phần motion và hạ tầng.

Ai đã build — và ranh giới quan trọng

Website Mark Woodland được thiết kế và art-direct bởi Uncommon Studio (Oliver Muñoz) — chính studio Úc mà tôi đã build portfolio kinetic-typography Mat Voyce cùng (một Awwwards Site of the Day). Vai trò của tôi ở Mark Woodland là front-end development, dựng server và deploy. Uncommon thiết kế; tôi làm cho nó chuyển động và làm cho nó chạy.

Ranh giới đó chính là lý do nên thuê một developer chuyên biệt thay vì kéo cả team thiết kế đi làm build. Mark Woodland không phải nghệ sĩ hay studio — anh là một founder và người vận động cải cách hệ thống, với các dự án trải từ EdTech (Xplor), AI chăm sóc người già (Kismet) đến nhà ở (Dwell). Một website như thế phải toát ra sự đáng tin và cao cấp: motion tiết chế, video chạy hoàn hảo, và không downtime. Không phần nào trong đó là việc thiết kế — đó là kỹ thuật. Khi motion và hạ tầng do một người chỉ làm đúng việc đó lo, design direction lên sóng ở cường độ đầy đủ thay vì bị pha loãng bởi những thỏa hiệp của một người làm chung chung.

Brief nhìn từ ghế developer

Thiết kế của Uncommon dựa trên ba thứ mà tất cả đều sống chết ở front-end:

• Một chuỗi intro có đạo diễn. Site mở đầu bằng một loading sequence có animation — ấn tượng đầu tiên về độ uy tín của một founder, nên nó phải có "hồn", không phải một cái spinner.
• Video tương tác, ở khắp nơi. Sự hiện diện của Mark là media: các buổi talk, podcast, video bình luận. Site phải trình bày video sắc nét mà không dính cái giá hiệu năng của autoplay tất cả.
• Phải luôn online và luôn nhanh. Một site thought-leadership mà 404 giữa một đợt PR thì còn tệ hơn không có site. Phải có người làm chủ server và pipeline deploy — không phải push một bản build rồi cầu may.

Phần craft: GSAP motion đọc ra như được đạo diễn

Toàn bộ hệ motion chạy trên GSAP. Điều tách một bản build studio cao cấp khỏi một template là coi motion như một ngôn ngữ mạch lạc — một bộ ease chung và một thang thời lượng nhất quán — thay vì một đống animation lẻ. Các section reveal được điều khiển bởi ScrollTrigger từ một vốn từ chung để nhịp điệu giữ nhất quán từ hero xuống footer:

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// Một ngôn ngữ reveal, dùng lại khắp nơi — đây là thứ đọc ra như "được thiết kế"
gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    yPercent: 16,
    opacity: 0,
    ease: 'expo.out',
    duration: 1,
    scrollTrigger: { trigger: el, start: 'top 84%', once: true },
  })
})

Loader intro là một GSAP timeline duy nhất chứ không phải CSS animation, nên việc reveal trang có thể được sắp trên cùng một chiếc đồng hồ — loader biến đi và nội dung hero nâng lên như một chuyển động liền mạch, không bao giờ cắt cụt sang một frame tĩnh:

const intro = gsap.timeline({ defaults: { ease: 'expo.inOut' } })

intro
  .to('[data-loader-bar]', { scaleX: 1, duration: 1.1, ease: 'power2.inOut' })
  .to('[data-loader]', { yPercent: -100, duration: 0.9 })
  .from('[data-hero] [data-stagger]', { yPercent: 110, stagger: 0.06 }, '<0.2')

Tham số vị trí '<0.2' là thứ làm nó có chủ đích: hero bắt đầu nâng lên trước khi loader thoát hẳn, nên mắt không bao giờ rơi vào một frame chết. Cơ chế sâu hơn đằng sau chuyện này — pin, scrub, reveal so le — nằm trong hướng dẫn GSAP ScrollTrigger của tôi.

Video cảm giác cao cấp mà không kéo sập trang

Video là cái bẫy hiệu năng lớn nhất trên một site nhiều media. Autoplay một bức tường clip là trang nghẹt vì decode. Quy tắc tôi luôn ship: mỗi lúc một video chạy, lazy-load, với một poster frame đứng thế cho tới khi clip thực sự cần.

const players = gsap.utils.toArray<HTMLVideoElement>('[data-video]')

function activate(target: HTMLVideoElement) {
  players.forEach((video) => {
    if (video === target) {
      video.play()
    } else {
      video.pause()          // không bao giờ decode quá một clip cùng lúc
      video.currentTime = 0
    }
  })
}

Mọi animation chuyển đổi chỉ chạm vào transform và opacity, nên tương tác vẫn mượt kể cả khi một clip mới đang decode ở nền. Đó là khác biệt giữa motion cảm giác đắt tiền và motion cảm giác hỏng — và đó là kiểu phán đoán mà một chuyên gia front-end chuyên trách đưa ra mà không cần ai nhắc.

Nửa còn lại của công việc: dựng server và deploy

Đây là chỗ "dev GSAP cho studio" âm thầm trở thành nhiều hơn animation. Năng lực cốt lõi của một studio thiết kế là thiết kế — họ thường không muốn ôm DNS, TLS, một Node runtime, và một build pipeline. Ở Mark Woodland tôi ôm hết, để studio không phải ôm.

Con đường ổn định, có tài liệu cho một site Next.js như thế này là một Node server production chạy bản build, đứng sau một CDN cho asset tĩnh và cache, với deploy tự động khi push. Những thứ thiết yếu tôi đã setup và kiểm chứng:

• Một build pipeline production — next build trong CI, để deploy là một cú git push, không phải một nghi thức thủ công vỡ lúc nửa đêm.
• TLS và cấu hình domain đúng — HTTPS, redirect đúng (apex ↔ www), và cache header để CDN thực sự cache được.
• Incremental Static Regeneration ở nơi nội dung cập nhật mà không cần rebuild, để trang phục vụ nhanh như tĩnh mà vẫn mới.
• Uptime sống sót qua một đợt PR — cả lý do một site founder tồn tại là khoảnh khắc một nhà báo hay nhà đầu tư ghé, và nó phải tức thì mọi lần.

Không thứ nào trong đó hào nhoáng, và đó chính là điểm. Một đối tác studio trả về một bản build đẹp mà họ không deploy được là làm nửa việc. Ôm cả motion lẫn hạ tầng là thứ cho phép một team thiết kế được tiếp tục là một team thiết kế.

Một studio thực sự nhận được gì

Bỏ hết chi tiết đi thì dự án Mark Woodland là mô hình tôi chạy cho các studio: bạn làm chủ thiết kế và mối quan hệ khách hàng; tôi làm chủ front-end motion, hiệu năng, và server. Design direction lên sóng ở độ trung thực đầy đủ vì người build nó làm GSAP và WebGL để sống, và nó luôn online vì cùng người đó làm chủ deploy.

Nếu studio của bạn thắng bằng thiết kế nhưng phần build cứ vượt quá team — hoặc bạn không muốn ôm server — thì đó chính là khoảng trống tôi lấp. Xem cách hợp tác white-label vận hành trong hướng dẫn white-label creative development cho agency, và cách soi một đối tác trong chọn đối tác kỹ thuật cho studio sáng tạo.

FAQ

Vai trò của Hon Tran ở website Mark Woodland là gì?

Front-end development, dựng server và deploy. Uncommon Studio (Oliver Muñoz) làm chủ thiết kế và art direction; tôi build hệ GSAP motion, phần video tương tác, và setup server cùng pipeline deploy.

"Dev GSAP cho studio" là gì?

Một front-end developer chuyên biệt mà các studio đưa vào để build phần nhiều-motion của một dự án — animation GSAP, WebGL, hiệu năng — dưới thương hiệu của studio, để team thiết kế không phải căng mình sang phần kỹ thuật họ không làm hằng ngày.

Bạn có lo cả deploy chứ không chỉ front-end?

Có. Ở các dự án như Mark Woodland tôi ôm toàn bộ con đường ra production: build pipeline, TLS, CDN và cache, ISR, và uptime — để studio nhận một site lên sóng và luôn nhanh, không chỉ một codebase.

Làm sao giữ một site nhiều video vẫn nhanh?

Mỗi lúc chỉ chạy một video, lazy-load clip tới khi gần viewport, dùng poster frame làm placeholder, chỉ animate transform và opacity khi swap, và tôn trọng prefers-reduced-motion cho khả năng tiếp cận.

Cùng build thứ gì đó lên sóng được

Nếu bạn là một studio hay agency cần một dev GSAP để ôm cả motion lẫn deploy dưới thương hiệu của bạn — đó chính là việc tôi làm.

• Xem cách tôi làm và bắt đầu một dự án ở trang hire.
• Xem thêm tác phẩm đã ship, đã đạt giải trong kho dự án.
• Sẵn sàng trao đổi? Cùng trao đổi →

---

Viết bởi Hon Tran — creative developer, sáng lập hontran.dev, và thành viên ban giám khảo Awwwards. Hơn 11 năm xây trải nghiệm web đạt giải, ưu tiên hiệu năng (GSAP, WebGL, Next.js) cho khách hàng toàn cầu. Hai lần được Awwwards vinh danh "Independent of the Year" và là người Việt đầu tiên thắng một giải web quốc tế. hontran.dev · Behance.