Đang tải bảng tin…
Codrops0 Hot0 bình luận13 phút đọc
Building Persistent Page Transitions with WebGPU and Vanilla JavaScript
A step-by-step walkthrough of building seamless GPU-powered page transitions using WebGPU and vanilla JavaScript. The technique uses a persistent pool of WebGPU image planes that are never created or destroyed — instead they are detached from DOM tracking during transitions, tweened freely with GSAP (bounds and opacity), then reattached to the destination page's slots. A lightweight SPA router intercepts navigation, injects the new page alongside the old, fires out() and in() transition methods concurrently, and removes the old page only after all tweens complete. Key patterns include using getBoundingClientRect() for coordinate-free layout sync, a mutating lock to prevent overlapping transitions, and three transition roles: keep (morph), remove (fade out), and add (stamp + fade in).
Nguồn: https://tympanus.net/codrops/2026/06/30/building-persistent-page-transitions-with-webgpu-and-vanilla-javascript. 8sync News chỉ tóm tắt và dẫn link; bản quyền nội dung thuộc tác giả và nguồn gốc.
Đề xuất cho bạn
Phoronix0 Hot2 phút
Servo Browser Engine Continues Making Much Progress On Less Than $8k Monthly
Servo 0.3 browser engine has been released alongside a monthly development recap. Key improvements include CSS font feature support, new DOM APIs, SpiderMonkey JavaScript engine updates fixing memory safety bugs, accessibility work, WebGPU feature additions, a new about:memory diagnostic tool, and reduced OS thread usage per CPU. The project operates on roughly $7,659/month in donations — below their $10k monthly goal — with funds covering CI servers, Outreachy interns, and maintainer costs.
