3 אנימציות טקסט באלמנטור

<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 src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger, SplitText);

  document.querySelectorAll('.gsap-heading').forEach((heading) => { // הקלאס של הכותרת
    const split = new SplitText(heading, { type: "lines, words, chars" });

    gsap.from(split.words, { // חלוקה לפי מילים
      clipPath: "inset(100% 0% 0% 0%)",
      opacity: 0,
      stagger: 0.5,
      scrollTrigger: {
        trigger: heading,
        start: "top 80%",
        end: "top 30%",
        markers: false,
        scrub: 1,
      },
    });
  });
});
</script>

<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 src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger, SplitText);
	
  document.querySelectorAll('.gsap-title').forEach((heading) => { // קלאס הכותרת
    const split = new SplitText(heading, { type: "lines, words, chars" });

    gsap.from(split.words, { // חלוקה לפי מילים
      opacity: 0.2,           // שקיפות ראשונית
      stagger: 0.5,
      scrollTrigger: {
        trigger: heading,
        start: "top 80%",
        end: "top 30%",
        markers: false,
        scrub: 1,
      },
    });
  });
});
</script>

<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', function() {
  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('.gsap-title').forEach((heading) => {
    gsap.from(heading, {
      clipPath: "inset(0% 0% 0% 100%)",
			ease: "power4.out",
      scrollTrigger: {
        trigger: heading,
        start: "top 70%",
        end: "top 40%",
        markers: false,
        scrub: 1,
				
      },
    });
  });
});
</script>