GSAP+scrollTrigger 3D圆环交错视图滚动

这是一个很有意思的效果，有时可以用于产品或者照片墙的展示。主要是结合 GSAP 中的 ScrollTrigger，加上css的3D旋转等实现。

效果展示

在线代码 （你也可以 👉点击这里 ，参考原网站的作品效果。）

实现思路

1.通过grid布局创建2列标签块，定义好每个块的样式大小，以及设置好一些css 3D旋转属性。例如: transform-style: preserve-3d; perspective；

2.方法 isLeftSide 用来判断2列块的左右，用于设置 rotateZ，skewX，x 左右的旋转/倾斜/偏移；

3.为每个块创建一个带有ScrollTrigger的GSAP时间轴timeline动画，其中设置 scrub: true至关重要，这样才能把动画的执行和滚动操作绑定起来；

4..from 为每个块定义之前的效果（你不用担心中途样式该如何定义，因为创建块时就是它最初的状态， .from< 初始状态 <.to）

5..to 为每个块定义之后的效果（你可以理解为之前和之后时的效果是相反的，想要达到圆环的效果，是可以这么做的）