let Wid = window.innerWidth;
if (Wid > 1199) {
const section = document.querySelector('.services .services-main');
const wrapper = document.querySelector('.services .container');
const wrapperInner = document.querySelector('.services__wrapper-inner');
const oneCard = document.querySelector('.services__content');
const totalWidth = wrapperInner.scrollWidth - wrapper.clientWidth;
const startTrigger = $('.services .row').hasClass('first-row')
? 'top -=30%top'
: 'top top';
const gsapConfig = {
x: () => {
return -(
wrapper.scrollWidth -
window.innerWidth +
window.innerWidth * 0.05 +
(window.innerWidth / 2 - oneCard.offsetWidth / 2)
);
},
scrollTrigger: {
trigger: section,
start: startTrigger,
end: 'bottom top',
scrub: 1,
pin: true,
pinSpacing: true,
markers: false,
},
};
gsap.to(wrapperInner, gsapConfig);
ScrollTrigger.refresh();
let navWidth = 0;
let maxScrollerWidth = totalWidth;
function slideAnim(e) {
e.preventDefault();
let direction = 1;
if ($(this).hasClass('next-btn')) {
direction = 1;
} else if ($(this).hasClass('prev-btn')) {
direction = -1;
}
navWidth += direction * innerWidth;
navWidth = Math.max(0, Math.min(navWidth, maxScrollerWidth));
gsap.to(wrapperInner, {
duration: 0.8,
x: -navWidth,
ease: 'power3.out',
});
}
document.querySelector('.prev-btn').addEventListener('click', slideAnim);
document.querySelector('.next-btn').addEventListener('click', slideAnim);
}
Comments