Scroll Horizontal WordPress Elementor

		
		    
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> 

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> 

<script>
    
function iniciarGsap(){
    let telaAtual = window.innerWidth

    let slider = document.querySelector(".slider");
    let sections = gsap.utils.toArray(".secao");
    
    ScrollTrigger.killAll(); 

    let sliderTl = gsap.timeline({
    defaults: {
        ease: "none"
    },
    scrollTrigger:{
        trigger: slider,
        pin: true,
        scrub: 2,
        end: () => {
    if(telaAtual > 1024){
        return "+=" + (slider.offsetWidth * .3)
    }else{
        return "+=" + (slider.offsetWidth * .8)
    }
}
    }
})

    sliderTl.to(slider, {
    x: ((sections.length - 1) * -100) + "vw"
})
}

addEventListener("DOMContentLoaded", iniciarGsap)

//Meus amigos, essa função abaixo faz com que a cada redimensionamento de tela, a página recarregue sem cache, para evitar bugs no scrollHorizontal

window.addEventListener('resize', function() {
  window.location.href = window.location.href + '?v=' + Date.now();
});


</script>