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:
@@ -218,51 +218,22 @@ onMounted(async () => {
|
||||
gsap.set(card, { autoAlpha: 0, x: p.x, y: p.y, scale: 0.8, rotateZ: p.rotate })
|
||||
})
|
||||
|
||||
// 统一时间线:所有动画填满时间轴,无空白
|
||||
const totalCards = services.length
|
||||
// 入场动画(无 pin)
|
||||
const tl = gsap.timeline()
|
||||
let cursor = 0 // 时间游标
|
||||
|
||||
// 第一屏:标题入场 + 所有卡片飞入归位
|
||||
tl.to(headerRef.value, { autoAlpha: 1, y: 0, duration: 0.8, ease: 'power3.out' }, cursor)
|
||||
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, x: 0, y: 0, scale: 1, rotateZ: 0,
|
||||
duration: 0.8, ease: 'back.out(1.2)',
|
||||
}, cursor + 0.1 + index * 0.08)
|
||||
}, 0.2 + index * 0.1)
|
||||
})
|
||||
cursor += 1
|
||||
|
||||
// 后续屏:逐张聚焦,每步 duration=1 填满整步
|
||||
for (let focus = 0; focus < totalCards; focus++) {
|
||||
cardElements.value.forEach((card, index) => {
|
||||
if (!card) return
|
||||
tl.to(card, {
|
||||
scale: index === focus ? 1.05 : 0.85,
|
||||
autoAlpha: index === focus ? 1 : 0.4,
|
||||
duration: 0.8, ease: 'power2.out',
|
||||
}, cursor)
|
||||
tl.call(() => handleCardHover(index, index === focus), [], cursor + 0.2)
|
||||
})
|
||||
cursor += 1
|
||||
}
|
||||
|
||||
// 最后一屏:恢复正常
|
||||
cardElements.value.forEach((card, index) => {
|
||||
if (!card) return
|
||||
tl.to(card, { scale: 1, autoAlpha: 1, duration: 0.6, ease: 'power2.out' }, cursor)
|
||||
tl.call(() => handleCardHover(index, false), [], cursor)
|
||||
})
|
||||
cursor += 1
|
||||
|
||||
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)
|
||||
|
||||
Reference in New Issue
Block a user