Thank you a lot for @GreenSock and @Rodrigo , appreciate!
I set up the GSAP Context but the page1 screen will still remain in index and page2.
I think GSAP Context is actually working but the page1 screen is still there......😥
export default {
setup() {
let ctx;
let area = ref();
onMounted(() => {
ctx = gsap.context(() => {
const section3 = document.querySelector('.section3');
const srollTL = gsap.timeline({
scrollTrigger: {
trigger: section3,
pin: true,
markers: true,
scrub: true,
},
});
srollTL.to('.gate-left-1', { yPercent: '-100' });
srollTL.to('.gate-right-1', { yPercent: '100' }, '<');
srollTL.to('.gate-left-2', { yPercent: '-100' });
srollTL.to('.gate-right-2', { yPercent: '100' }, '<');
}, area.value);
});
onUnmounted(() => {
ctx.revert();
ScrollTrigger.killAll();
});
},
};