如何避免GSAP动画破坏绝对定位的居中布局？

问题根源 #

你的居中异常主要有两个原因：

1. CSS语法错误：.wavySectionContainer的width: vw无效，应改为width: 100vw，错误的容器宽度会打乱子元素居中计算。
2. Transform属性冲突：CSS里的transform: translate(-50%, -50%)和GSAP的旋转动画会互相干扰——transform是复合属性，GSAP的rotation会覆盖原有translate值，导致居中失效。

修复方案 #

方案1：替换CSS居中方式（无transform冲突）

用margin:auto实现绝对定位元素的居中，彻底避免和GSAP动画的transform冲突：

.wavySectionContainer {
  height: 800px;
  width: 100vw; /* 修复宽度语法错误 */
  background-color: var(--primary);
  position: relative;
}

.aboutMe,
.sun {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /* 删除原来的transform: translate(-50%, -50%) */
}

方案2：用GSAP原生属性维持居中（兼容动画）

保留top:50%+left:50%的基础定位，改用GSAP的xPercent/yPercent实现居中，GSAP会自动合并transform属性，确保旋转动画不会覆盖居中效果：

1. 修改CSS移除transform：

.aboutMe,
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 删除transform: translate(-50%, -50%) */
}

2. 调整GSAP代码，先设置初始居中再添加旋转动画：

gsap
  .timeline()
  .from(["main", "footer"], { y: "10%", autoAlpha: 0 })
  .set(".sun", { xPercent: -50, yPercent: -50 }) // 先确保元素居中
  .to(".sun", {
    scrollTrigger: {
      trigger: ".wavySectionContainer",
      scrub: true,
    },
    rotation: 360,
    duration: 2,
    ease: "none",
  });

内容的提问来源于stack exchange，提问作者Henrique B