2026-05-14 14:55:42 +08:00
|
|
|
import { gsap, } from 'gsap'
|
|
|
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
|
|
|
|
export default {
|
|
|
|
|
name: 'tween-animation',
|
2026-05-15 16:41:52 +08:00
|
|
|
mounted(el: HTMLElement) {
|
2026-05-14 14:55:42 +08:00
|
|
|
// 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')
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
},
|
2026-05-15 16:41:52 +08:00
|
|
|
};
|
