SimpleSmooth.js

import gsap from 'gsap'

import { qs } from '@/utils'
import { Events } from '@/events'

export default class {
  ui = {}

  constructor(el = qs('[data-smooth-simple]'), content = null) {
    this.el = el
    this.content = content || qs('[data-smooth-simple-c]', this.el)
    this.state = {
      target: 0,
      current: 0,
      scroll: 0,
      resize: false,
    }
    this.init()
  }

  init() {
    this.setBounds()
    this.addEvents()
  }

  addEvents() {
    Events.on('scroll', this.scroll)
    Events.on('tick', this.run)
    Events.on('resize', this.resize)
  }

  setBounds() {
    const contentH = this.content.getBoundingClientRect().height
    const elH = this.el.getBoundingClientRect().height
    this.state.max = contentH <= elH ? 0 : contentH - elH
  }

  resize = () => {
    const state = this.state
    state.resize = true
    this.setBounds()
    this.clamp()
    state.scroll = state.current = state.target
    state.resize = false
  }

  run = () => {
    const state = this.state
    state.current += (state.target - state.current) * 0.1
    state.scroll = Math.round(state.current * 100) / 100
    this.content.style.transform = `translate3d(0, ${-state.scroll}px, 0)`
  }

  scroll = ({ y }) => {
    this.state.target += y
    this.clamp()
  }

  clamp() {
    this.state.target = gsap.utils.clamp(0, this.state.max, this.state.target)
  }

  removeEvents() {
    Events.off('scroll', this.scroll)
    Events.off('tick', this.run)
    Events.off('resize', this.resize)
  }

  destroy() {
    this.removeEvents()
    this.el =
    this.cointent =
    this.state = 
    null
  }
}