Carrossel Imagens Position

Código JavaScript

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

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

<script>

    document.addEventListener("DOMContentLoaded", (event) => {
        
        const tamanhoSlider = document.querySelector(".slider").offsetWidth;
        
        console.log(tamanhoSlider);
        
        gsap.registerPlugin(ScrollTrigger)
        
        const tl = gsap.timeline({
            scrollTrigger: {
                trigger: ".containerPai",
                pin: true,
                start: "top top",
                end: "+=2000",
                scrub: 2
            }
        });
        
        tl.to(".slider", {
            x: -1 * tamanhoSlider,
            duration: 2
        });
        
        tl.to(".slider img", {
            objectPosition: "0% center",
            duration: 2
        }, "<");
        
        tl.from(".titulo1", {
            opacity: 0,
            duration: .5
        }, "-=1");
        
    });

</script>

		
	
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Torne-se um Desenvolvedor de Sucesso!