שינוי גודל סרטון מעיגול לגודל מלא מה הוא עושה – משנה את צורת הסרטון מעיגול בגודל 10em לגודל המלא שהגדרתם לו באלמנטור איפה שמים – בניהול קודים של אלמנטור / ווידגט HTML מתחת לווידגט סרטון איך משתמשים – מוסיפים ווידגט סרטון לאתר ומוסיפים לו CSS CLASS של gsap-video
				
					<style>
 .gsap-video.elementor-widget-video .elementor-wrapper{
     overflow: hidden; 
     margin-right: 0;
 } 
 
</style>

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

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

  gsap.from(" .gsap-video.elementor-widget-video .elementor-wrapper", {
    scrollTrigger: {
      trigger: ".elementor-widget-video .elementor-wrapper",
      start: "top 70%", 
      end: "top 20%",   
      scrub: true,    
      markers: false,   
      toggleActions: "restart pause reverse pause",
    },
    borderRadius: "500px",  
    width: "10em",      
    height: "10em",  
    ease: "none",  
    transformOrigin: "center center",
    marginRight: "45%",
  });
});
</script>

				
			

טקסט מתמלא צבע בגלילה

מה הוא עושה? משנה את רמת השקיפות של האותיות לאפקט טקסט נכתב

איפה שמים? בניהול קודים של אלמנטור / ווידגט HTML מתחת לווידגט כותרת

הערות: יש להשתמש בווידגט כותרת ולהגדיר תגית HTML של H2
יש להוסיף CSS קלאס של text-scroll על הווידגט כותרת.

				
					<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>

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

  const split = new SplitType(".text-scroll h2", {
    types:  "lines, words, chars",
  });

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".text-scroll",
      start: "top 70%",
      end: "top 40%",
      markers: false,
      scrub: 1,
    },
  });

  tl.from(split.chars, {
    opacity:0.3,
    stagger: 0.1,
  });
});
</script>

				
			

עוד אופציה עם כותרת H3

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

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

  // Function to split text into spans
  function splitTextIntoSpans(selector) {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
      const text = element.innerText;
      element.innerHTML = ""; // Clear existing content
      text.split("").forEach(char => {
        const span = document.createElement("span");
        span.style.display = "inline-block";
        span.style.opacity = "0";
        span.style.filter = "blur(8px)";
        span.style.transform = "translateX(-100px)";
        span.innerText = char === " " ? "\u00A0" : char; // Non-breaking space for spaces
        element.appendChild(span);
      });
    });
  }

  splitTextIntoSpans("h3");

  document.querySelectorAll("h3").forEach(h1 => {
    gsap.fromTo(h1.querySelectorAll("span"), {
      x: '-100%',
      filter: 'blur(8px)',
      opacity: 0,
    }, {
      x: '0%',
      filter: 'blur(0)',
      opacity: 1,
      duration: 1.5,
      ease: "power4.out",
      stagger: 0.05,
      scrollTrigger: {
        trigger: h1,
        start: "top 90%", // Adjust if necessary
        end: "top 30%", // Ensures animation completes
        toggleActions: "restart none none reset",
        scrub: 1,
        markers: false
      },
    });
  });
});
</script>
				
			

אנימציית כפתור מתמלא (אייקון בצד שמאל)

מה הוא עושה? מותח את הרקע של הכפתור מהאייקון לכל הכפתור

איפה שמים? בניהול קודים של אלמנטור / ווידגט HTML מתחת לווידגט כפתור

הערות: יש לשים CSS קלאס gsap-btn-new על האלמנט ולהגדיר שוליים פנימיים 0 וצבע רקע שקוף. את צבע הרקע להגדיר בתוך הקוד

				
					<style>
    .gsap-btn-new .elementor-button-content-wrapper {
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        background-color: transparent;
        gap: 0;
        border-radius: 500px;
        height: 2.5em;
        overflow: hidden; 
    }


    .gsap-btn-new .elementor-button-text {
        padding: 1em 1em 1em 3em;
        z-index: 1; 
    }


    .gsap-btn-new .elementor-button-icon {
        position: absolute;
        background-color: #48eefd; /*צבע רקע ועיגול*/
        border-radius: 500px;
        padding: 0.7em;
        height: 2.5em;
        width: 2.5em;
        transition: width 0.3s ease; 
        left: 0; 
        z-index: 0; 
    }
    
    .gsap-btn-new .elementor-button-icon svg{
        position: absolute;
        left: 0.7em;
    }
</style>

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

<script>
document.querySelector(".gsap-btn-new").addEventListener("mouseenter", function () {

  gsap.to(".gsap-btn-new .elementor-button-icon", {
    duration: 0.1,
    width: "100%",      
    left: "0", 
    ease: "none",      
  });
  
   gsap.to(".gsap-btn-new .elementor-button-icon svg", {
    duration: 0.1,      
    left: "0.7em", 
    ease: "none",      
  });
});

document.querySelector(".gsap-btn-new").addEventListener("mouseleave", function () {
  gsap.to(".gsap-btn-new .elementor-button-icon", {
    duration: 0.1,
    width: "2.5em",     
    left: "0", 
  ease: "none",    
  });
});
</script>

				
			

תמונה גודלת

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

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

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

<style>
.sticky_cont {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
z-index: 1000;
overflow: hidden;
width: 100%;
}
.column_container {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>
<script>
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.config({
markers: false
});
$(".animate_container").each(function (i, element) {
let trigger = $(element);
let animationTarget = $(element).find(".animate_box");
let animationTimeline = gsap.timeline({
scrollTrigger: {

trigger: trigger,
start: "top top",
end: "bottom bottom",
scrub: true
}
});
animationTimeline.fromTo(animationTarget,
{
width: "30em",
height: "25em",
borderRadius: "15em"
},
{
width: "100%",
height: "100vh",
borderRadius: "2em",
duration: 1
}
);
});
</script>