Text Scramble (Load, Scroll, Hover)

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

<!-- ScrambleText and SplitText are paid plugins – you do NOT have permission to use the links below in your projects. -->
<!-- Please become a Club Member using our discount code above and host your own files --> 
<script src="https://cdn.jsdelivr.net/gh/ilja-van-eck/osmo/assets/gsap/ScrambleTextPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ilja-van-eck/osmo/assets/gsap/SplitText.min.js"></script>

<div class="demo-group">
  <div class="scramble-section">
    <h1 data-scramble="load" class="scramble-heading">This heading will reveal with a basic scrambling effect<br>on page load</h1>
  </div>
  <div class="scramble-section u--bg-light">
    <h2 data-scramble="scroll" class="scramble-heading">this is an example of a heading that is triggered by a scrolltrigger</h2>
  </div>
  <div class="scramble-section">
    <h2 data-scramble-alt="" data-scramble="scroll" class="scramble-heading">You can even control the characters that are used during scramble</h2>
  </div>
  <div class="scramble-section u--bg-light">
    <h2 class="scramble-heading">and here&#x27;s how to work with scramble text on hover:</h2>
    <a data-scramble-hover="link" href="#" class="scramble-button w-inline-block">
      <p data-scramble-text="this text can be custom too" data-scramble-hover="target" class="scramble-button-text">How to scramble on hover</p>
    </a>
  </div>
</div>

.scramble-section {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  display: flex;
}

.scramble-section.u--bg-light {
  background-color: #efeeec;
}

.scramble-heading {
  text-align: center;
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 12em;
  margin: 0 auto;
  font-family: RM Mono, Arial, sans-serif;
  font-size: 3em;
  font-weight: 400;
  line-height: .9;
}

.scramble-button {
  color: #131313;
  text-transform: uppercase;
  border: 1px dotted #000;
  border-radius: .3125em;
  padding: .5em 1em;
  font-family: RM Mono, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
}

.scramble-button-text {
  margin: 0;
}

gsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin, SplitText)

// Function to reveal stuff on load
function initScrambleOnLoad(){
  let targets = document.querySelectorAll('[data-scramble="load"]')
  
  targets.forEach((target) => {
  	// split into seperate words + letters 
    let split = new SplitText(target, {
      type: "words, chars",
      wordsClass: "word",
      charsClass: "char"
    });
    
    gsap.to(split.words, {
      duration: 1.2,
      stagger: 0.01,
      scrambleText: {
        text: "{original}",
        chars: 'upperCase', // experiment with different scramble characters here
        speed: 0.85,
      },
      // Once animation is done, revert the split to reduce DOM size
      onComplete: () => split.revert()
    })   
  })
}

// Function to reveal stuff on scroll
function initScrambleOnScroll(){
  let targets = document.querySelectorAll('[data-scramble="scroll"]')
  
  targets.forEach((target) => {
  	// Used this attribute to showcase a different character scramble, can be replaced with many scenarios
    let isAlternative = target.hasAttribute("data-scramble-alt")
    
    let split = new SplitText(target, {
      type: "words, chars",
      wordsClass: "word",
      charsClass: "char"
    });
    
    gsap.to(split.words, {
      duration: 1.4,
      stagger: 0.015,
      scrambleText: {
        text: "{original}", 
        chars: isAlternative ? '▯|' : 'upperCase',  // experiment with different scramble characters here
        speed: 0.95,
      },
      scrollTrigger: {
        trigger: target,
        start: "top bottom",
        once: true
      },
      // Once animation is done, revert the split to reduce DOM size
      onComplete: () => split.revert()
    })   
  }) 
}

function initScrambleOnHover(){
  let targets = document.querySelectorAll('[data-scramble-hover="link"]')
  
  targets.forEach((target) => {
    let textEl = target.querySelector('[data-scramble-hover="target"]')
    let originalText = textEl.textContent // save original text
    let customHoverText = textEl.getAttribute("data-scramble-text") // if this attribute is present, take a custom hover text
    
    let split = new SplitText(textEl, {
      type: "words, chars",
      wordsClass: "word",
      charsClass: "char"
    })
    
    target.addEventListener("mouseenter", () => {
      gsap.to(textEl, {
        duration: 1,
        scrambleText: {
          text: customHoverText ? customHoverText : originalText,
          chars: "◊▯∆|"
        }
      })
    })
    
    target.addEventListener("mouseleave", () => {
      gsap.to(textEl, {
        duration: 0.6,
        scrambleText: {
          text: originalText,
          speed: 2,
          chars: "◊▯∆"
        }
      })
    })    
  })
}

document.addEventListener("DOMContentLoaded", () => {
  initScrambleOnLoad()
  initScrambleOnScroll()
  initScrambleOnHover()
})