问个js动画，使用gsap，图片固定不动，小窗口从下到上运动，只显示小窗口里面的内容？

Question

小窗口还是个右侧倾斜的T型、

Answer 1

提供个思路，遮罩动画的话就是给小的加 overflow: hidden ，通过更改大的定位实现位移

<style>
.shadow-div {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden; /* 设置溢出隐藏实现遮罩 */
}

.content-div {
  position: absolute;
  width: 400px;
  height: 400px;
}

.content-div>img {
  width: 100%;
  height: 100%;
}
</style>

<div class="shadow-div">
  <div class="content-div">
      <img src="xxx" alt="">
  </div>
</div>

这样只需要更改 content-div 的定位就能实现动画，从下到上运动就是 top 减少

题主使用 gsap 的话，也是一样的

const contentBox = document.querySelector(".content-div");

gsap.to(contentBox, { 
  duration: 2,
  y: -200, // 垂直位移，负数就是从下到上了
});