Code-Create/src/directives/tween.ts

import { gsap, } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
export default {
	name: 'tween',
	mounted(el: HTMLElement, binding: any) {
		const params = binding.value
		const duration = params.duration || 1
		// if(!binding.value.isGsap)return
		let dom = document.querySelector('body')
		gsap.registerPlugin(ScrollTrigger);
		let tl1 = gsap.timeline();
		tl1.from(el,duration, params,)
		ScrollTrigger.create({
			trigger: el, // 触发器元素
			start: "top 90%", // 滚动触发器的起始滚动位置
			end: '100% 80%',   // 滚动触发器的结束滚动位置
			markers: false, // 开启标注功能
			animation:tl1,
			scroller:dom,//设置指定元素为滚动依据
			scrub:false,
			// toggleActions: "play reset play reset",
			// onUpdate:(v)=>{
			// 	if(v.progress < 0.1){
			// 		v.trigger?.classList.remove('active')
			// 	}else{
			// 		v.trigger?.classList.add('active')
			// 		// v.trigger?.classList.add('active')
			// 	}
			// }
		});
	},
};