Text Switcher Sequence – Elementor and GSAP Tutorial

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
    
    .dm-switcher-text-4 {
       
        transition: none !important;
        opacity: 0;
        max-width: none !important;
        
    }
  
    .dm-switcher-4 {
        
        transition: none !important;
        
    }
    
</style>
  

<script>

 document.addEventListener("DOMContentLoaded", (event) => {
     
  const dmSwitcherTexts4 = document.querySelectorAll('.dm-switcher-text-4');
  const dmSwitcher4 = document.querySelector('.dm-switcher-4');

  let dmSwitcherTranslateX, dmSwitcherTranslateY, dmEnterDuration, dmExitDuration, dmSwitchSpeed;

  /*Mobile*/
  if (window.innerWidth <= 767) {
    dmSwitcherTranslateX = 500;
    dmSwitcherTranslateY = 0;
    
    dmEnterDuration = 3; //Entry to center
    dmExitDuration = 3; //center to exit
    dmSwitchSpeed = 2000; //in ms
    
  } 
  
  /*Desktop/Tablet*/
  else
  
  {
    dmSwitcherTranslateX = 0;
    dmSwitcherTranslateY = -100;
    
    dmEnterDuration = 2; //Entry to center
    dmExitDuration = 2; //center to exit
    dmSwitchSpeed = 1500; //in ms
  }

  dmSwitcher4Anim(0);

  function dmSwitcher4Anim(index) {
    const nextIndex = (index + 1) % dmSwitcherTexts4.length;
    const current = dmSwitcherTexts4[index];

    // Reset current element to initial position
    gsap.set(current, {
      transform: `translate(${dmSwitcherTranslateX}px, ${dmSwitcherTranslateY}px)`,
      opacity: 0
    });

    const tl = gsap.timeline({
      onComplete: () => {
        dmSwitcher4.appendChild(current);
        gsap.set(current, {
          transform: `translate(${dmSwitcherTranslateX}px, ${dmSwitcherTranslateY}px)`,
          opacity: 0
        });
      }
    });

    // Animate from: start position -> center
    tl.to(current, {
      transform: `translate(0px, 0px)`,
      opacity: 1,
      duration: dmEnterDuration,
      ease: 'none'
    });

    // Animate from: center -> out (opposite direction)
    tl.to(current, {
      transform: `translate(${-dmSwitcherTranslateX}px, ${-dmSwitcherTranslateY}px)`,
      opacity: 0,
      duration: dmExitDuration,
      ease: 'none'
    });

    // Call next animation after first half (so they overlap smoothly)
    setTimeout(() => {
      dmSwitcher4Anim(nextIndex);
    }, dmSwitchSpeed);
  }
  
 }); 
</script>