Lưới xáo trộn bằng Flip
Đổi bố cục tùy ý. Flip tự tính đường bay cho từng ô.
Đang tải demo…
Cách hoạt động
- 1.Chụp vị trí hiện tại bằng Flip.getState().
- 2.Đổi DOM: xáo thứ tự, đổi số cột, gì cũng được. Các ô nhảy ngay sang chỗ mới.
- 3.Flip.from() đặt các ô về chỗ cũ rồi cho bay tới chỗ mới.
- 4.Lưu ý: absolute: true làm lưới mất chiều cao lúc đang bay. Phải giữ chiều cao lưới, không thì nội dung bên dưới trồi lên.
Code chính
function shuffle() {
const from = grid.offsetHeight;
const state = Flip.getState(".tile");
// Đổi DOM tuỳ ý, ở đây là xáo thứ tự
gsap.utils.shuffle([...grid.children]).forEach((t) => grid.appendChild(t));
const to = grid.offsetHeight;
const flip = Flip.from(state, {
duration: 0.9,
ease: "expo.inOut",
stagger: 0.03,
absolute: true,
});
// Giữ chiều cao lưới tới khi ô cuối cùng hạ cánh
flip
.fromTo(grid, { height: from }, { height: to, duration: flip.duration() }, 0)
.set(grid, { clearProps: "height" });
}