真实元素边框和gsap标记之间的区别

问题描述 投票:0回答:1

我使用 GSAP ScrollTrigger 制作图像的垂直滑块。这个想法是,带有 id=scroller 的隐藏元素需要一定的高度(我选择它为 400 vh),而所有内容都处于固定位置,当您向下滚动 #scroller 元素时,滚动触发器会垂直移动滑块,每次滑块的元素x进入某个区域主背景变为x背景

我有一个滚动触发器,可以为滑块设置动画:

gsap.to('#slider',{
        scrollTrigger:{
            trigger: "#scroller",
            start: 0,
            scrub: 1,
            snap:"labelsDirectional"
        },
        y:-sliderH*6-80,
    })

还有另一个根据滑块位置改变背景的触发器

let elems=document.querySelectorAll('.slider-elem')
let heroBacks=document.querySelectorAll('.hero-back')
elems=Array.from(elems)
ScrollTrigger.batch(elems, {
    onLeave: (elements, triggers) => {
        gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 0})
    },
    onEnterBack: (elements, triggers) => {
        x=gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 1})
        console.log(x)
    },
    start:'top 60%',
    end:'bottom 10%',
    markers:true
});

当我向下滚动时,一切正常,除了滑块元素的真实边框(顶部底部)和标记中指示的边框之间存在差异之外

no difference

difference

javascript animation parallax gsap scrolltrigger
1个回答
0
投票

解决方案是添加一个scrollTrigger.refresh()来更新start,end值并将其分配给onEnter回调,这样就变成了:

let elems=document.querySelectorAll('.slider-elem')
elems=Array.from(elems)
ScrollTrigger.batch(elems, {
    onLeave: (elements, triggers) => {
        gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 0})
    },
    onEnter:(elems,trigs)=>{
        for(trig of trigs){
            trig.refresh()
        }
    },
    onEnterBack: (elements, triggers) => {
        x=gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 1})
    },
    start:'top 60%',
    end:'bottom 10%',
    markers:true
});
© www.soinside.com 2019 - 2024. All rights reserved.