如何解决GSAP scrollTrigger - 仅对被触发的元素进行动画处理
我正在使用 GSAP 开发动画。所以我想要做的是在进入视口时为团队成员卡片设置动画。
当该部分只出现一次时很容易,但该卡片组件在页面团队中出现 10 次。使用我当前的代码,当第一个被击中时,它们都会触发它们的动画。
在定义动画时,有没有办法只针对当前触发元素的子元素?在 Jquery 中使用某种 This。
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',opacity:0})
.to('.photo',{opacity:1,duration:0.3},'>')
.to('.member-name',{transform:"translateX(-0)",opacity:1,'>')
.to('.title','>')
.addLabel('end')
解决方法
这就是我修复它的方法。我在每个元素上放置了一个随机 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',opacity:0})
.to('#'+id+' .photo',{opacity:1,duration:0.3},'>')
.to('#'+id+' .member-name',{transform:"translateX(-0)",opacity:1,'>')
.to('#'+id+' .title','>')
.addLabel('end')
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。