const trigger = new ScrollTrigger.default({
            trigger: {
                once: false,    // 切換是否只是一次性
                offset: {
                    // 元素的偏移量要加上檢視的偏移量才算整體偏移量
                    // 例如:現在的檢視高度是667,元素out的高度是228(還沒顯示用out元素高度,已經顯示用in元素的高度),所以現在的偏移量是228*0.2+667*02
                    element: {
                        x: 0,
                        y: (trigger: any, rect: any, direction: any) => {
                            // rect (整體scrollDOM容器的所有資訊)
                            // trigger (內部已經新增的動畫)
                            // direction (方向，top,bottom等)
                            // 元素距離檢視層多少的偏移量就顯示元素
                            return 0.2
                        }
                    },
                    viewport: {
                        x: 0,
                        y: (trigger: any, frame: any, direction: any) => {
                            // trigger (內部已經新增的動畫)
                            // frame (檢視高寬)
                            // direction (方向，top,bottom等)
                            return trigger.visible ? 0 : 0.2
                        }
                    }
                },
                toggle: {
                    // 元素切換的class,可以陣列顯示多個元素,也可以只是字串
                    class: {
                    },
                    // 回撥函式
                    callback: {
                        // 元素可見狀態變化的回撥方法
                        visible: (trigger: any) => {

                        },
                        // 進入元素的回撥方法
                        in: (trigger: any) => {
                            return new Promise((resolve, reject) => {
                                setTimeout(resolve, 10)
                            })
                        },
                        // 移出元素的回撥方法
                        out: (trigger: any) => {
                            return new Promise((resolve, reject) => {
                                setTimeout(resolve, 10)
                            })
                        }
                    }
                },
            },
            scroll: {
                // 滾動停止後,動畫繼續執行的毫秒數
                sustain: 200,
                // 滾動條的主體
                element: document.getElementById('scroll'),
                // 滾動中的回撥函式
                callback: (e: any) => {
                    if (e.y < 500) {
                        setMove(e.y + 100)
                    }
                },
                // 開始滾動的回撥函式
                start: () => { },
                // 停止滾動的回撥函式
                stop: () => { },
                // 滾動方向變化的回撥函式
                directionChange: () => { }
            }
        })
        trigger.add('.an', {
            toggle: {
                class: {
                    in: ['animateIn'],
                    out: ['animateOut']
                }
            }
        })

<div className="an"></div>