用gsap写一个vivo官网前端动画

当然可以！以下是一个使用GSAP创建Vivo官网前端动画的简单示例：

HTML结构如下：

<div class="hero">
  <h1 class="title">Welcome to Vivo</h1>
  <p class="subtitle">Experience the future</p>
  <button class="cta">Get Started</button>
</div>

CSS样式如下：

.hero {
  text-align: center;
  padding: 100px;
  background-color: #f5f5f5;
}

.title {
  font-size: 48px;
  color: #333;
}

.subtitle {
  font-size: 24px;
  color: #666;
}

.cta {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

JavaScript代码如下：

// 创建动画对象
const hero = gsap.timeline();

// 动画序列
hero.from(".title", { opacity: 0, y: -50, duration: 1 })
    .from(".subtitle", { opacity: 0, y: -50, duration: 1 }, "-=0.5")
    .from(".cta", { opacity: 0, duration: 0.5 }, "-=0.5");

// 触发动画
hero.play();

在上面的代码中，我们使用GSAP创建了一个timeline对象，将标题、副标题和按钮的出现动画序列添加到其中。通过调整参数（如`opacity`、`y`和`duration`）可以实现不同的动画效果。最后，使用`play()`方法触发动画。

你可以根据Vivo官网的实际设计和需求，修改选择器和动画效果，以实现更加符合要求的动画效果。

希望这个示例对你有所帮助！如果你有其他问题，请随时提问。