The magically changingtime ready for your project.

As the changing words cause a new line on some occasions, ensure the heading has 'Min H' set to 8rem for example to ensure when a new line in created, it won't cause your page to jump.

To activate add the code below to before </body> tag.

Typing Animation Code
<style>
/* Blinking cursor effect */
#cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: black;
  margin-left: 0.1rem; 
  animation: blink 1s step-start 0s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
</style>

<script>
$(document).ready(function() {
  // Clear initial placeholder text
  $('#changingword').text('');

  var words = [
    'word',
    'phrase',
    'sentence',
  ];
  var i = 0; // Current word index

  // Append cursor to the element
  $('#changingword').after('<span id="cursor"></span>');

  function backspaceWord(callback) {
    var $span = $('#changingword');
    var word = $span.text();
    var interval = setInterval(function() {
      if (word.length > 0) {
        word = word.slice(0, -1); // Remove last character
        $span.text(word);
      } else {
        clearInterval(interval);
        callback(); // Call callback after backspacing is complete
      }
    }, 100); // Backspacing speed, adjust as needed
  }

  function typeWord(word, callback) {
    var $span = $('#changingword');
    var j = 0; // Current character index
    var interval = setInterval(function() {
      if (j < word.length) {
        $span.text($span.text() + word[j++]);
      } else {
        clearInterval(interval);
        setTimeout(callback, 2000); // Added 2-second delay before calling back
      }
    }, 100); // Typing speed, adjust as needed
  }

  function updateWord() {
    backspaceWord(function() {
      i = (i + 1) % words.length; // Move to the next word
      typeWord(words[i], function() {
        setTimeout(updateWord, 1500); // Wait a bit before starting the next word
      });
    });
  }

  // Initially type the first word and set the cycle going
  typeWord(words[0], function() {
    setTimeout(updateWord, 1500);
  });
});
</script>
Scroll/Fade Animation Code
User
<script>
$(document).ready(function() {
  var words = [
    'word',
    'phrase',
    'sentence',
  ];

  // Initially set #changingword to the first word.
  $('#changingword').text(words[0]);
  $('#changingword').css({ 'position': 'relative', 'opacity': '1' });

  var i = 0;
  setInterval(function() {
    // Slide up and fade out
    $('#changingword').animate({ 'top': '-20px', 'opacity': '0' }, 500, function() {
      // Cycle through the words array
      i = (i + 1) % words.length;
      $(this).text(words[i]);

      // Reset position instantly to down before sliding up to make it a smooth transition
      $(this).css({ 'top': '20px' });

      // Slide back to original position and fade in
      $(this).animate({ 'top': '0px', 'opacity': '1' }, 500);
    });
  }, 3000); // Adjust the interval as needed
});
</script>