<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('.containertextop').forEach(container => {
  const target = container.querySelector('.textoperspectiva');

  if (target) {
    let perspectivatexto = gsap.timeline({
      scrollTrigger: {
        trigger: container,
        start: "top top",
        end: "+=" + 1.2 * window.innerHeight + "px",
        scrub: 2,
        pin: true,
      }
    });

    perspectivatexto.fromTo(
      target,
      {
        rotateX: -65,
        scale: 0.5,
        y: 300,
        opacity: 0.2,
      },
      {
        rotateX: 0,
        scale: 1,
        y: 0,
        opacity: 1,
        duration: 1.5,
        ease: "power2.out",
      }
    );
  }
});
</script>


<style>
.textoperspectiva {
  transform: perspective(900px) rotateX(-65deg) scale(0.5) translateY(800px);
  opacity: 0.2;
}

.containertextop {
  transition: none !important;
}
</style>