Smooth scroll example GSAP+Vue

smooth-scroll.js

<template>
  <div class="page" :style="{height: `${pageHeight}px`" }>
    <div ref="page" class="page-inner">
     
  </div>
</template>

<script>
import { TimelineMax, TweenMax, Linear } from 'gsap'

export default {
  data() {
    return {
      tl: new TimelineMax({ paused: true }),
      proxyTween: TweenMax.to({}, 1, { paused: true }),
      scrollPosition: 0,
      pageHeight: 0
    }
  },

  methods: {
    onLoadComplete() {
      TweenMax.defaultEase = Linear.easeNone

      TweenMax.set(document.body, {
        height: this.$refs.page.getBoundingClientRect().height
      })

      this.createTimeline()

      window.addEventListener('scroll', this.onScroll, false)
      this.onScroll()

      TweenMax.ticker.addEventListener('tick', this.onTick)

      this.isLoaded = true
    },

    createTimeline() {
      const { page } = this.$refs
      const { height } = page.getBoundingClientRect().height
      
      this.pageHeight = height

      this.tl.fromTo(
        page,
        1,
        {
          y: 0
        },
        {
          y: -height
        },
        0
      )
    },

    onScroll() {
      const totalHeight = this.$refs.page.getBoundingClientRect().height
      const windowHeight = window.innerHeight
      const scrollTop = window.pageYOffset

      TweenMax.set(document.body, {
        height: totalHeight
      })

      const scrollPercent = Math.max(
        scrollTop / (totalHeight - windowHeight),
        0
      )

      this.proxyTween.progress(scrollPercent).pause()
    },

    onTick() {
      let progress = this.tl.progress()
      progress += (this.proxyTween.progress() - progress) * 0.05

      // console.log(progress)

      this.tl.progress(progress)
    }
  }
}
</script>

<style scoped>
.page {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100vh;
}

.page-inner {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
</style>