Hi folks

There is this: Moving Letters by Tobias Ahlin.

and there is this: Slick Carousel

You can easily apply Slick Carousel using this (if want to): JB Slicked List

Code that manages to work is this:

JS File to load is called animejs

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js" type="text/javascript"></script>

CSS added to page via YOUR™ method:

.my-slick-slide .element-to-move { // i.e. .my-slick-slide .card-title
  font-weight: 200;
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}
.letter { // this class is applied to each letter from .card-title
  display: inline-block;
  line-height: 1em;
}

In the Custom JS textarea for the Slicked List options you can add the JS that calls animejs

jQuery(document).ready(function($){
    // Wrap every letter in a span.letter
    $('.my-slick-slide .element-to-move').each(function(){
        $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>{replace1}amp;</span>"));
    });
    // For each slide after change
    $('.my-slick-slide').on('afterChange', function(event, slick, currentSlide){
        // activate anime for the active slide
        anime.timeline({loop: true})
        .add({
            targets: '.my-slick-slide .slick-active .letter',
            translateX: [40,0],
            translateZ: 0,
            opacity: [0,1],
            easing: "easeOutExpo",
            duration: 1200,
            delay: function(el, i) {
                  return 500 + 30 * i;
            }
        }).add({
            targets: '.pulsars .slick-active .letter',
            translateX: [0,-30],
            opacity: [1,0],
            easing: "easeInExpo",
            duration: 1100,
            delay: function(el, i) {
                  return 100 + 30 * i;
            }
        }); // anime
    }); // For each slide after change END
    // Anime for initial slide
    anime.timeline({loop: true})
    .add({
        targets: '.pulsars .slick-active .letter',
        translateX: [40,0],
        translateZ: 0,
        opacity: [0,1],
        easing: "easeOutExpo",
        duration: 1200,
        delay: function(el, i) {
              return 500 + 30 * i;
        }
    }).add({
        targets: '.pulsars .slick-active .letter',
        translateX: [0,-30],
        opacity: [1,0],
        easing: "easeInExpo",
        duration: 1100,
        delay: function(el, i) {
              return 100 + 30 * i;
        }
    }); // Anime for initial slide END
}); // ready END

This gets you up and running.

Then you tweak it as required.

If you play around with this, post your cool ideas below.

Nice!

Jon