How to use the gsap/all.TweenMax.to function in gsap

move() {
        if (!this.mesh || this.isZoomed || this.hasClicked) return
        this.getBounds()

        TM.set(this.mesh.position, {
            x: this.offset.x,
            y: this.offset.y,
        })

        TM.to(this.mesh.scale, 0.3, {
            x: this.sizes.x - this.delta,
            y: this.sizes.y - this.delta,
            z: 1,
        })
    }

hide(shouldHide, force) {
        const delay = shouldHide && !force ? 0 : 1.2
        TM.to(this.uniforms.u_alpha, 0.5, {
            delay,
            value: shouldHide && !force ? 0 : 1,
            ease: Power3.easeIn,
        })

        TM.to(this.$els.el, 0.5, {
            delay,
            alpha: shouldHide && !force ? 0 : 1,
            force3D: true,
        })
    }

onOpen() {
        const title = this.$els.el.querySelector('.detail-view__title')
        const text = this.$els.el.querySelectorAll('p')
        const { title: pageTitle } = APP.Stage.$els

        this.stgs = new ST([title, text], { type: 'lines', linesClass: 'line' })

        this.stgs.lines.forEach((l) => {
            const div = document.createElement('div')
            div.classList.add('line-ctn')
            wrap(l, div)
        })

        TM.to(pageTitle, 0.5, {
            alpha: 0,
            force3D: true,
        })

        TM.fromTo(this.$els.closeBtn, 0.5, {
            rotate: -45,
            scale: 0,
            alpha: 0,
        }, {
            rotate: 0,
            scale: 1,
            alpha: 1,
            ease: Power2.easeInOut,
            force3D: true,
        })

updateScrollBar() {
        const progress = map(this.progress * 100, 0, 100, 5, 100)
        TM.to(this.$els.progress, 0.3, { xPercent: progress, force3D: true })
    }

ease: Power2.easeInOut,
                })

                ev('view:toggle', { shouldOpen: shouldZoom, target: this })
            },
        })

        TM.to(this.mesh.scale, 1.2, {
            delay,
            x: newScl.x,
            y: newScl.y,
            ease: Expo.easeInOut,
            onUpdate: () => { this.getBounds() },
        })

        TM.to(this.mesh.position, 1.2, {
            delay,
            x: newPos.x,
            y: newPos.y,
            ease: Expo.easeInOut,
        })

        TM.to(this.uniforms.u_hoverratio.value, 1.2, {
            delay,
            x: newRatio.x,
            y: newRatio.y,
            ease: Expo.easeInOut,
        })

        TM.staggerTo(this.stgs.lines, 1, {
            yPercent: shouldZoom ? 100 : 0,
            ease: Expo.easeInOut,

onScroll({ limit, offset }) {
        this.progress = offset.x / limit.x

        TM.to(this.$els.title, 0.3, { x: -this.progress * offsetTitle, force3D: true })
        this.updateScrollBar()
    }

hide(shouldHide, force) {
        const delay = shouldHide && !force ? 0 : 1.2
        TM.to(this.uniforms.u_alpha, 0.5, {
            delay,
            value: shouldHide && !force ? 0 : 1,
            ease: Power3.easeIn,
        })

        TM.to(this.$els.el, 0.5, {
            delay,
            alpha: shouldHide && !force ? 0 : 1,
            force3D: true,
        })
    }