refactor: 移除新增板块的 ScrollTrigger pin 效果

从 HomeServices 开始往后的 6 个板块,
去掉 pin(固定)和 scrub(滚动驱动)效果,
改为正常的入场动画:滚动到时触发动画,播放完毕后正常滚动

修改的板块:
- HomeServices: 卡片飞入归位(无 pin)
- HomeAchievements: 逐个数字展示(无 pin)
- HomeTestimonials: 卡片扩散入场(无 pin)
- HomeTechStack: 标签散开入场(无 pin)
- HomeProcess: 标题 + 线条 + 步骤入场(无 pin)
- HomeUpdates: 卡片错开入场(无 pin)

保留 HomePartnersWork 的 pin 效果(原有板块)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
2026-06-03 20:10:40 +08:00
parent e94f7d92e9
commit 77567b2cc2
6 changed files with 43 additions and 144 deletions
+10 -25
View File
@@ -233,38 +233,23 @@ onMounted(async () => {
gsap.set(card, { autoAlpha: 0, scale: 0.5 })
})
// 统一时间线:入场 + pin 滚动切换,无空白
// 入场动画(无 pin):标题 + 卡片从中心扩散
const totalCards = testimonials.length
const tl = gsap.timeline()
let cursor = 0
// 第一屏:标题入场 + 第一张卡片出现
tl.to(headerRef.value, { autoAlpha: 1, y: 0, duration: 0.8, ease: 'power3.out' }, cursor)
tl.to(cardElements.value[0], { autoAlpha: 1, scale: 1, duration: 0.8, ease: 'back.out(1.5)' }, cursor + 0.2)
tl.call(() => { currentIndex.value = 0 }, [], cursor + 0.2)
cursor += 1
tl.to(headerRef.value, { autoAlpha: 1, y: 0, duration: 0.8, ease: 'power3.out' }, 0)
cardElements.value.forEach((card, index) => {
if (!card) return
tl.to(card, { autoAlpha: 1, scale: 1, duration: 0.6, ease: 'back.out(1.5)' }, 0.3 + index * 0.08)
})
// 后续屏:滚动切换卡片,每屏切一张
for (let i = 1; i < totalCards; i++) {
// 当前卡片缩小淡出
tl.to(cardElements.value[i - 1], {
autoAlpha: 0, scale: 0.5, duration: 0.5, ease: 'power2.in'
}, cursor)
// 新卡片放大淡入(紧接淡出开始,略有重叠)
tl.to(cardElements.value[i], {
autoAlpha: 1, scale: 1, duration: 0.6, ease: 'back.out(1.5)'
}, cursor + 0.2)
tl.call(() => { currentIndex.value = i }, [], cursor + 0.2)
cursor += 1
}
// 初始化到第一张卡片
tl.call(() => { currentIndex.value = 0 }, [], 0.3)
ScrollTrigger.create({
trigger: rootRef.value,
start: 'top top',
end: () => `+=${cursor * window.innerHeight}`,
pin: true,
scrub: 0.5,
anticipatePin: 1,
start: 'top 75%',
toggleActions: 'play none none none',
animation: tl,
})
}, rootRef.value)