GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，它可以用于创建各种动画效果，包括上下浮动的效果。

要实现上下浮动的效果，你可以使用GSAP的gsap模块来创建动画。下面是一个示例代码，展示了如何使用GSAP来实现一个元素在垂直方向上的浮动效果：

<template>
  <div class="pageBg">
    <div class="leftImg" ref="leftImg"></div>
    <div class="rightImg" ref="rightImg"></div>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  name: "title",
  data() {
    return {}
  },
  components: {},
  watch: {},
  mounted() {
// 定义动画参数
    const duration = 2; // 动画持续时间
    const distance = 10; // 浮动的距离
    gsap.to(this.$refs.leftImg, duration, {
      y: -distance, // 向上浮动
      yoyo: true, // 动画结束后返回初始位置
      repeat: -1, // 无限重复动画
    });
    gsap.to(this.$refs.rightImg, duration, {
      y: -distance, // 向上浮动
      yoyo: true, // 动画结束后返回初始位置
      repeat: -1, // 无限重复动画
    });
  },
}
</script>

<style lang="scss" scoped>
.pageBg {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url("./assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .leftImg {
    background: url("./assets/left.png") no-repeat;
    background-size: 100% 100%;
    width: 493px;
    height: 362px;
    position: relative;
    left: 5%;
  }

  .rightImg {
    background: url("./assets/right.png") no-repeat;
    background-size: 100% 100%;
    width: 509px;
    height: 368px;
    right: 5%;
  }
}
</style>

你可以根据实际需求调整动画的参数和缓动函数，以达到你想要的上下浮动效果。记得在使用之前确保已经正确引入GSAP库，并且元素的初始位置需要在CSS中进行设置。