Text Block animation

Hi sitesme,

On you child theme, create a folder and name it js, inside it create a file called moving-letters.js and inside the file paste this code:

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml3 .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: (el, i) => 150 * (i+1)
  }).add({
    targets: '.ml3',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Then in functions.php of your child theme, add this code:

add_action( 'wp_enqueue_scripts', 'wp_animate_text', 100 );

function wp_animate_text() {
   wp_enqueue_script( 'anime-js', 'https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', '', '2.0.2', true);
   wp_enqueue_script( 'moving-letters-js', get_stylesheet_directory_uri().'/js/moving-letters.js', array('anime-js'), '1.0.0', true);
}

If you use a Special Heading, you can just directly add the class ml3 via Advanced (tab) > Developer Settings > Custom CSS Class.
If you are using a Text Block then change it from Visual mode to Text mode then add it like this:
<p class="ml3">Click here to add your own text</p>
Hope this helps.

Best regards,
Nikko

• This reply was modified 2 years, 7 months ago by Nikko.