自定义指令

src/directives/tween-animation.ts

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