let panels: HTMLDivElement[] = gsap.utils.toArray('.mobile-section')
if (panels && panels.length > 0) {
masterTimeLine.current = gsap.timeline({
scrollTrigger: {
trigger: sectionRef,
pin: true,
scrub: 1,
snap: 1 / (panels.length - 1),
invalidateOnRefresh: true,
pinSpacing: false,
immediateRender: false,
preventOverlaps: true,
pinType: 'fixed',
anticipatePin: 0,
start: 'top top',
end: () => '+=' + sectionRef.clientWidth,
onEnter: ({end}) => {
setScrollTweenEnd(end)
},
},
})
masterTimeLine.current.to(panels, {
x: '-200vw',
ease: 'none',
})
ScrollTrigger.create({
trigger: '#experience',
containerAnimation: masterTimeLine.current,
start: 'top center',
end: 'center top',
id: '1',
onEnter: () => {
setCurrentSlider(1)
// gsap.to('#experience', {opacity: 1, duration: 0.2})
},
onLeave: () => {
// gsap.to('#experience', {opacity: 0.3, duration: 0.2})
setCurrentSlider(2)
},
onEnterBack: () => {
setCurrentSlider(1)
// gsap.to('#experience', {opacity: 1, duration: 0.2})
},
})
ScrollTrigger.create({
trigger: '#ai-powered',
containerAnimation: masterTimeLine.current,
start: 'top center',
end: 'center top',
id: '2',
onEnter: () => {
setCurrentSlider(2)
},
onLeave: () => {
setCurrentSlider(3)
},
onEnterBack: () => {
setCurrentSlider(2)
},
onLeaveBack: () => {
setCurrentSlider(1)
},
})