<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>