GSAP scrollTrigger -仅对已触发的元素进行动画处理
GSAP scrollTrigger -仅对已触发的元素进行动画处理
提问于 2021-03-23 03:44:06
我正在用GSAP开发动画。因此，我想要做的是当团队成员卡进入视口时对其进行动画处理。
当该部分只出现一次时，这很容易，但该卡片组件在页面团队中出现了10次。在我当前的代码中，当第一个被点击时，它们都会触发它们的动画。
在定义动画时，有没有办法只针对当前触发元素的子元素？在Jquery中使用某种类似的方法。
var tl = gsap.timeline({
scrollTrigger:{
trigger: ".el-card-team-member",
start: "top center",
//onUpdate: self => console.log("progress:", self.progress.toFixed(3)),
},
scrub: 1
});
tl.addLabel('start')
.set('.photo', {opacity:0})
.set('.member-name', {transform:"translateX(-50px)",opacity:0})
.set('.title', {transform:"translateX(-50px)",opacity:0})
.to('.photo', {opacity:1,duration:0.3},'>')
.to('.member-name', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
.to('.title', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
.addLabel('end')回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-06 23:16:18
下面是我修复它的方法。我为每个元素设置了一个随机ID，然后遍历所有元素，给它们一个不同的时间线。
$('.repeating-element').each(function(){
var id = $(this).attr('id');
var tl = gsap.timeline({
scrollTrigger:{
trigger: '#'+id,
start: "top center",
//pin:'.px-home-s2-s3 .bg',
//onUpdate: self => console.log("progress:", self.progress.toFixed(3)),
},
scrub: 1
});
tl.addLabel('start')
.set('#'+id+' .photo', {opacity:0})
.set('#'+id+' .member-name', {transform:"translateX(-50px)",opacity:0})
.set('#'+id+' .title', {transform:"translateX(-50px)",opacity:0})
.to('#'+id+' .photo', {opacity:1,duration:0.3},'>')
.to('#'+id+' .member-name', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
.to('#'+id+' .title', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
.addLabel('end')
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66752853
复制相关文章
相似问题
腾讯云开发者
