AnimationGSAPMotionLottie

Web animation

Boutique tech studio đưa các bản thiết kế tĩnh lên trình duyệt bằng chuyển động và micro-interactions tự nhiên, tối ưu hiệu năng tải trang từ kinh nghiệm làm việc thực tế.

Mỗi dự án website tại Perxel là một bài toán vận hành riêng biệt. Có những khách hàng tìm kiếm khả năng kể chuyện thương hiệu như Tam Coc Garden hay Sun DMD. Có những đối tác đặt tính ổn định, chỉn chu và chuẩn mực lên hàng đầu như REE, Cảng Quốc tế Long An hay RMIT. Và cũng có những dự án mong muốn cả hai yếu tố trên như Huynchi hay Tuan Loc Commodities.

Với kinh nghiệm nhiều năm phục vụ khách hàng đa dạng về cả ngành nghề lẫn quốc gia tại các agency lớn, Perxel dung hòa các nhu cầu này bằng trải nghiệm thực tế trên môi trường web. Sự dung hòa đó thể hiện qua các phản biện kỹ thuật cần thiết khi làm việc cùng designer ngay từ những bước đầu tiên. Chúng tôi đưa các bản vẽ tĩnh lên trình duyệt bằng chuyển động và micro-interactions tinh tế, giúp website có chiều sâu nhưng vẫn giữ trọn hiệu năng vận hành.

Ba giá trị cốt lõi

Dung hòa tính nghệ thuật

Perxel thấu hiểu nhu cầu thực tế của từng thương hiệu. Chúng tôi dung hòa giữa câu chuyện thương hiệu và sự ổn định, chỉn chu của doanh nghiệp lớn, mang đến trải nghiệm tương tác phù hợp với bối cảnh.

Phản biện kỹ thuật cần thiết

Perxel làm việc sát sao cùng designer từ bước phác thảo Figma. Chúng tôi chủ động góp ý về tính khả thi của chuyển động, xử lý các khoảng trống thiết kế và đề xuất phương án responsive.

Lựa chọn công nghệ linh hoạt

Không phụ thuộc một công cụ, Perxel kết hợp linh hoạt giữa GSAP, CSS, JavaScript thuần và các thư viện tinh gọn. Chúng tôi thậm chí tự viết mã nguồn riêng cho từng dự án để website tải nhanh nhất có thể.

Công cụ linh hoạt và tối ưu codebase

Các chuyển động 2D phức tạp được lập trình bằng GSAP để kiểm soát timeline chính xác. Tuy nhiên, thay vì lạm dụng một công cụ duy nhất, lợi thế của Perxel là khả năng vận dụng linh hoạt nhiều giải pháp khác nhau tùy yêu cầu dự án.

Với các chuyển động cơ bản, Perxel ưu tiên CSS animation hoặc JavaScript thuần để giữ website nhẹ nhất có thể. Trong nhiều trường hợp, các thư viện siêu tinh gọn như motion được lựa chọn để tối ưu hiệu năng tải trang.

Với các dự án đặc thù yêu cầu tối ưu tối đa hiệu năng và không chứa mã nguồn dư thừa, Perxel tự phát triển các thư viện animation riêng như cuajs (tối ưu chuyển động) và scroll-snooper (tối ưu tương tác cuộn trang), đã được chia sẻ công khai trên GitHub.

Với ảnh minh hoạ chuyển động như icon hay illustration, Perxel dùng Lottie vì file nhẹ, sắc nét và đổi được màu theo brand. Xem thêm bài Lottie là gì và cách dùng cho website.

Đảm bảo tương thích bằng kinh nghiệm thực tế

Kiểm thử trên các thiết bị di động thực tế luôn là một quy chuẩn kiểm soát chất lượng quan trọng trong ngành để đảm bảo sự đồng bộ hiển thị. Với kinh nghiệm qua hàng trăm dự án đa dạng, Perxel biết chính xác hiệu ứng nào nên đi kèm kỹ thuật nào để website hiển thị ổn định trên đa số trình duyệt và thiết bị của người dùng cuối.

Chúng tôi luôn thiết lập responsive animation một cách thông minh, tự động điều chỉnh hoặc tinh giản hiệu ứng khi phát hiện thiết bị có cấu hình hạn chế, tránh hiện tượng giật lag hoặc gây nóng máy, mang lại trải nghiệm cuộn trang tự nhiên.

FAQ

Liên hệ với Perxel

Footnotes

Bạn muốn nhận báo giá?
Hãy liên hệ Perxel ngay hôm nay.