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();
        }
    }]
});

大多数其他代码会触发OK。但是，在页面转换之后，我无法让gsap滚动触发器工作。(locomotive.js也有同样的问题)

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

我是Barba和ScrollTrigger的新手，并且有有限的JS经验，所以一个明确的答案是非常受欢迎的。

Answer 1

当动画结束时，需要添加ScrollTrigger.refresh();来触发，而不是输入新页面。您可以使用GSAP中的onComplete属性这样做，如下所示：

// 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();
}