Cycling Site Subtitles

Lesson 5: Adding Subtle Animations (4:09)

Complete & Continue Next Lesson Learn More

Code from this lesson

Javascript

<!-- Subtitle Cycle from Will-Myers.com -->
<script>
(function() {
  const options = [
    "Woof around the world.",
    "Where in the woof am I?",
    "Your Pawsport to adventure.",
    "A walk in the bark.",
    "Embark on pawsome adventures."
  ];

  //Build Subtitle Element
  const siteTitle = document.querySelector('.header-display-desktop #site-title') || document.querySelector('.header-display-desktop .header-title-logo');
  const subtitle = document.createElement('div');
  subtitle.classList.add('cycle-subtitle');
  siteTitle.append(subtitle);

  let index = 0; // Initialize with the first option
  let isChangeAllowed = true;

  const setNewSubTitle = () => {
    if (isChangeAllowed) {
      let newSubtitle = options[index];

      subtitle.innerHTML = '' + options[index] + '';
      index += 1; 
      isChangeAllowed = false;
      setTimeout(() => {
        isChangeAllowed = true;
      }, 500); 
      
      if (index > options.length - 1) { index = 0 }
    }
  }

  siteTitle.addEventListener('mouseenter', setNewSubTitle);
  setNewSubTitle();
}());
</script>
 

Custom CSS


.cycle-subtitle {
  font-size: 14px;
}
.cycle-subtitle span {
  display: block;
  animation: subtitleAnimateIn 0.3s ease forwards;
}

@keyframes subtitleAnimateIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}