使用 GSAP Flip 实现响应式网格布局过渡动画

Hello everyone, I’m Iqbal Muthahhary, a freelance creative web developer based in Indonesia. It’s a pleasure to have the opportunity to inspire, teach, and learn in collaboration with Codrops.

大家好，我是 Iqbal Muthahhary，一位位于印尼的自由创意网页开发者。很高兴有机会与 Codrops 合作，激发灵感、教学和学习。

In this tutorial, we’ll explore how to build interactive grid layout transitions triggered by buttons using the GSAP Flip plugin, along with vanilla JavaScript and basic CSS Grid concepts. The interaction itself will remain simple: switching grid configurations and updating active button states, while GSAP handles the visual continuity.

在这个教程中，我们将探索如何使用 GSAP Flip 插件、原生 JavaScript 和基本的 CSS Grid 概念来构建由按钮触发的交互式网格布局过渡。交互本身将保持简单：切换网格配置并更新活动按钮状态，而 GSAP 处理视觉连续性。

The aim is to show how we can smoothly change the size of grid items and reorder them. This is a pattern that is very interesting, especially for portfolio layouts and interactive galleries.

目标是展示如何平滑更改网格项目的大小并重新排序它们。这是一个非常有趣的模式，特别是对于作品集布局和互动画廊。

This HTML is split into two sections, each with a specific role in controlling and displaying the grid gallery.

这个 HTML 被分为两个部分，每个部分在控制和显示网格图库中都有特定作用。

The first section acts as a configuration panel. It includes a set of buttons that let the user choose different grid layout scales. Each button has a data-size attribute that stores the target grid size value (such as 50%, 75%, 100%, etc.). The currently selected button receives the active class, which visually indicates the current choice and determines which value is applied to the gallery below.

第一部分充当配置面板。它包含一组按钮，让用户选择不同的网格布局比例。每个按钮都有一个 data-size 属性，用于存储目标网格大小值（例如 50%、75%、100% 等）。当前选中的按钮会收到 active 类，这视觉上指示当前选择，并决定应用哪个值到下面的图库。

The second section is the grid gallery itself. It uses a custom attribute, data-size-grid, to store the currently active grid size value. When the user clicks a button in the configuration panel, this attribute is updated accordingly. Changing data-size-grid updates the CSS grid layout, allowing the gallery to smoothly adapt to the selected configuration.

第二个部分是网格画廊本身。它使用自定义属性data-size-g...