- אפקט מילים נחתכות מלמטה – יש לתת לווידגט טקסט/כותרת את הקלאס gsap-heading
<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>2. אפקט טקסט נכתב משקיפות – יש לתת לווידגט טקסט/כותרת את הקלאס gsap-title
<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>3. אפקט סטיקר – יש לתת לווידגט טקסט/כותרת את הקלאס gsap-heading, את צבע הרקע מגדירים בהגדרת המתקדם של הווידגט תחת רקע.
<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>



