gsap - Barba 转换后刷新 GSAP ScrollTrigger

Question

页面转换后，我无法让 ScrollTrigger 工作。

我正在使用 barbs.init 中的视图数据。

/*PAGE TRANSITION*/
barba.init({
    transitions: [{
        name: 'opacity-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                duration: 0.5,
                opacity: 0,
                y: '50px',
            });
        },

        enter(data) {
            gsap.from(data.next.container, {
                duration: 0.5,
                opacity: 0,
                x:'-50px',
            });
        }
    }],
    views: [{
        namespace: 'tester',
        beforeLeave(data) {
            //alert('Leaving tester');
        },
        beforeEnter(data) {
            //alert('Entering tester');
        },
        afterEnter(data) {
            //alert('Entered tester');
            ScrollTrigger.refresh();
        }
    }]
});

大多数其他代码触发正常。但是，我无法在页面转换后让 gsap 滚动触发器工作。（与 locomotive.js 有同样的问题）

有人可以告诉我可能做错了什么。

我是 Barba 和 ScrollTrigger 的新手，JS 经验有限，因此非常欢迎明确回答。

Answer 1

您需要ScrollTrigger.refresh();在动画结束时添加 to 触发器，而不是输入的新页面。您可以使用onCompleteGSAP 补间中的属性来执行此操作，如下所示：

// ADD onComplete

enter(data) {
 gsap.from(data.next.container, {
    duration: 0.5,
    opacity: 0,
    x:'-50px',
    onComplete: () =>{
       ScrollTrigger.refresh(true)
    }

你可以在你的 Barba.js 视图中删除它

// DELETE THIS

 afterEnter(data) {
     //alert('Entered tester');
     ScrollTrigger.refresh();
}