Skeleton Loader Text

<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>

<!-- SplitText is a paid plugin – you do NOT have permission to use this link 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/SplitText.min.js"></script>

<div class="demo-group">
  <div class="ghost-section">
    <h1 data-load-skeleton="dark" class="ghost-heading">This heading will reveal with an effect called a ‘skeleton loader’.</h1>
  </div>
  <div class="ghost-section is--light">
    <h1 data-load-skeleton="light" class="ghost-heading">→ Fully attribute based<br>→ Set different themes<br>→ Control skeleton styling<br></h1>
  </div>
  <div class="ghost-section">
    <h1 data-load-skeleton="dark" class="ghost-heading is--small">The idea and concept of Skeleton Loading was introduced in 2013 by Luke Wroblewski. It describes the concept of a blank screen where dynamic content is replaced by styled blocks (skeleton) and is replaced with real content once it&#x27;s finished loading.</h1>
  </div>
</div>

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

.ghost-section.is--light {
  color: #121422;
  background-color: #cdf7ff;
}

.ghost-heading {
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 15em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: RM Mono, Arial, sans-serif;
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}

.ghost-heading.is--small {
  max-width: 25em;
  font-size: 2.5em;
  line-height: 1.1;
}

/* Define color themes here */
[data-load-skeleton="dark"]{
  --color-skeleton-base: #2E3643;
  --color-skeleton-pulse: #53636F; 
}

[data-load-skeleton="light"]{
  --color-skeleton-base: #B1D5DE;
  --color-skeleton-pulse: #8CA8B2; 
}

/* Hide actual text line so that its not visible underneath the placeholder div */
[data-load-skeleton] .single-line{
  visibility: hidden;
}

/* Style your placeholder/skeleton div over here */
.skeleton-overlay{
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  left: 0px;
  width: 100%;
  height: 80%;
  border-radius: 0.25rem;
  z-index: 1;
  background-color: var(--color-skeleton-base);
}

gsap.registerPlugin(ScrollTrigger, SplitText)
  
// Cleanup function to remove previous SplitText instances, overlays, and ScrollTriggers
function cleanup() {
  
  // Remove SplitText instances and overlays from each skeleton target
  document.querySelectorAll('[data-load-skeleton]').forEach(target => {
    // Clean up SplitText instance if it exists
    if (target.splitInstance) {
      target.splitInstance.revert();
      delete target.splitInstance;
    }
    // Remove any existing overlays
    target.querySelectorAll('.skeleton-overlay').forEach(overlay => overlay.remove());
  });
  
  // Kill ScrollTriggers associated with our skeleton overlays
  ScrollTrigger.getAll().forEach(trigger => {
    if (trigger.vars && trigger.vars.trigger && trigger.vars.trigger.closest('[data-load-skeleton]')) {
      trigger.kill();
    }
  });
  
}

function initSplit() {
  let skeletonLoadTargets = document.querySelectorAll('[data-load-skeleton]');

  // For each skeleton load target
  skeletonLoadTargets.forEach(target => {
    let splitInstance = new SplitText(target, {
      type: "lines",
      linesClass: "single-line",
    });
    // Save instance for cleanup later
    target.splitInstance = splitInstance;
    
    // Save text as aria label for screen readers
    target.setAttribute("aria-label", target.textContent);
    
    // For each line:
    splitInstance.lines.forEach(line => {
      // Hide it from screen readers
      line.setAttribute("aria-hidden", "true");
      
      // Add a div around each line
      let wrapper = document.createElement('div');
      wrapper.classList.add('single-line-wrap');
      line.parentNode.insertBefore(wrapper, line);
      wrapper.appendChild(line);
    });
  });
}

function initSkeletonLoader() {
  const instances = document.querySelectorAll('[data-load-skeleton]');
  
  instances.forEach(instance => {
    const overlays = [];
    const lineWrappers = instance.querySelectorAll('.single-line-wrap');
    
    // Create an overlay element in each line wrapper, and store in the array for later use
    lineWrappers.forEach(wrapper => {
      const overlay = document.createElement('div');
      overlay.classList.add('skeleton-overlay');
      wrapper.style.position = 'relative';
      wrapper.appendChild(overlay);
      overlays.push(overlay);
    });
    
    // Create a timeline for each overlay
    overlays.forEach((overlay, i) => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: overlay,
          start: "top 90%",
          once: true
        },
        defaults: {
          duration: 0.5, // duration for fade-out
          ease: "power2.inOut" // ease for fade-out
        }
      });
      
      // Use GSAP's getProperty method to read the CSS variable for pulse color
      const pulseColor = gsap.getProperty(instance, "--color-skeleton-pulse");
      
      // Find the text element to fade-in at the end (the line itself)
      const textEl = overlay.previousElementSibling;
      
      tl.to(overlay, {
        backgroundColor: pulseColor,
        duration: 0.3,
        ease: "power1.inOut",
        repeat: 2,
        yoyo: true,
        delay: i * 0.05
      })
      .to(overlay, {
        opacity: 0,
        onComplete: () => overlay.remove()
      })
      .to(textEl, {
        autoAlpha: 1
      }, "<");
    });
  });
}

// Function to init splitting, skeleton, and cleanup
function initTextEffects() {
  cleanup();
  initSplit();
  initSkeletonLoader();
}

// Debounce function to limit the rate of function calls
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// Reinitialize on resize with debounce
const onResize = debounce(initTextEffects, 250);
window.addEventListener('resize', onResize);

// Init split text, skeleton loader, and cleanup on load
document.addEventListener("DOMContentLoaded", () => {
  document.fonts.ready.then(initTextEffects);
});

[data-load-skeleton="dark"]{
  --color-skeleton-base: #2E3643;
  --color-skeleton-pulse: #53636F; 
}

[data-load-skeleton="light"]{
  --color-skeleton-base: #B1D5DE;
  --color-skeleton-pulse: #8CA8B2; 
}

/* Hide actual text line so that its not visible underneath the placeholder div */
[data-load-skeleton] .single-line{
  visibility: hidden;
}

/* Style your placeholder/skeleton div over here */
.skeleton-overlay{
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  left: 0px;
  width: 100%;
  height: 80%;
  border-radius: 0.25rem;
  z-index: 1;
  background-color: var(--color-skeleton-base);
}