Implementing Tobias Ahlin's "Moving Letters" Text Effects in Divi

This post may contain referral links which may earn a commission for this site

Tobias Ahlin has published a set of cool text effects called Moving Letters. He shares the HTML, CSS and JS needed to add these effects to a plain HTML page. But what about adding them into Divi? Here's (some initial thoughts) on how to do it.

If you hover over any of the effects you'll see a small "source" link appear at the bottom of the effect. Click this and you'll see the HTML, CSS and JS for that effect.

One way to add these bits of code into Divi is using the built-in Divi "Code" module. For each effect, I suggest using three code modules – one for each type of code.

Taking the first effect "Thursday" as an example, you'd put the following into each of three code modules. I've made some modifications to each block of code, which I'll discuss below.

HTML
<h1 class="ml1">
 <span class="text-wrapper">
 <span class="line line1"></span>
 <span class="letters">THURSDAY</span>
 <span class="line line2"></span>
 </span>
</h1>

I've left the HTML largely as it is. You may want to make copies of the HTML code module wherever you want to use the text effect in the page.

One thing I have done is move the "script" tag into the JavaScript block (below). While technically it's a HTML tag, it's purpose is to load a JavaScript file, which we only want to do once, rather than everywhere we add the HTML code module.

CSS
<style>
.ml1 {
 font-weight: 900 !important;
 font-size: 3.5em !important;
}

.ml1 .letter {
 display: inline-block !important;
 line-height: 1em !important;
}

.ml1 .text-wrapper {
 position: relative !important;
 display: inline-block !important;
 padding-top: 0.1em !important;
 padding-right: 0.05em !important;
 padding-bottom: 0.15em !important;
}

.ml1 .line {
 opacity: 0 !important;
 position: absolute !important;
 left: 0 !important;
 height: 3px !important;
 width: 100% !important;
 background-color: #fff !important;
 transform-origin: 0 0 !important;
}

.ml1 .line1 { top: 0 !important; }
.ml1 .line2 { bottom: 0 !important; }
</style>

I've made the following modifications to the CSS given by Tobias. First, I've surrounded it in "style" tags so that Divi recognizes it as CSS. Second, I've added "!important" to each CSS rule. While not particularly elegant, it helps ensure that Divi doesn't override the CSS used for the Moving Letters effect.

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

<script>
jQuery(function($){
// Wrap every letter in a span
$('.ml1 .letters').each(function(){
 $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
 .add({
 targets: '.ml1 .letter',
 scale: [0.3,1],
 opacity: [0,1],
 translateZ: 0,
 easing: "easeOutExpo",
 duration: 600,
 delay: function(el, i) {
 return 70 * (i+1)
 }
 }).add({
 targets: '.ml1 .line',
 scaleX: [0,1],
 opacity: [0.5,1],
 easing: "easeOutExpo",
 duration: 700,
 offset: '-=875',
 delay: function(el, i, l) {
 return 80 * (l - i);
 }
 }).add({
 targets: '.ml1',
 opacity: 0,
 duration: 1000,
 easing: "easeOutExpo",
 delay: 1000
 });
});
</script>

I've surrounded the JavaScript code in "script" tags so that Divi will recognize it as JavaScript. I've also surrounded it in "jQuery(function($){ … });" so that any jQuery in the code will be processed correctly.

Dealing with Formatting Issues

The above is just a start and should help you get the Moving Letters effects working in Divi. However, it's quite likely that you'll still have some formatting issues to contend with.

For example, in the effect I gave as an example, the text "THURSDAY" is added as a H1 tag. Unfortunately, Divi applies additional styles to the H1 tag which are not set / overridden by the Moving Letters CSS.

If you're familiar with CSS, it should be a relatively simple task to fix up this formatting on whichever effect you choose to use (if you do, please share it in the comments!).

If you're not familiar with CSS please let me know which Moving Letters effect you're using, and share a link to your page if possible, and I'll try to help out with fixing up the formatting.

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Wow, I've been reading articles for days to learn how to implement these cool codes we found on the Net on Divi.

    This article was my salvation.

    Thank you very very very much! <3

    Reply
    • You're very welcome, Alessandra!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *