Animated text

Hello Dave,
Themler doesn’t have such feature to make this kind of text animation, unfortunately.

Gina
Themler support

Is it bot possible to add via html using the html box? Regards Dave

You can try, use Insert HTML control in Themler. As for the code itself, I can only suggest searching for it in the internet, for example: https://css-tricks.com/snippets/css/typewriter-effect/

Additional CSS can be added in Themler -> Home -> Settings-> additional CSS. If any JS should be added as well, you can add it to Additional Head HTML.

Gina
Themler Support

Hi Gina.

Thanks, however, what do you mean by If any JS should be added as well, you can add it to Additional Head HTML?
Regards Dave

Dave,
I meant that if you find some external code to achieve this animation effect that would require adding JavaScript code, this kind of code can be added directly to Additional Head HTML section in Themler.

Gina

Hi Gina. Thanks for your help. I am just struggling with the steps.

1. I insert the Html into a container and place the following test html code
   <h1>
   <a href class data-period data-type>

2. I then I insert the following code into the css section
   body {
   background-color:#ce3635;
   text-align: center;
   color:#fff;
   padding-top:10em;
   }

   • { color:#fff; text-decoration: none;}

3. There is then some JS code. as shown below. Do you mean that I have to open the template and place the code after the Head section of the template? Regards Dave
   var TxtType = function(el, toRotate, period) {

   this.toRotate = toRotate;
   this.el = el;
   this.loopNum = 0;
   this.period = parseInt(period, 10) || 2000;
   this.txt = '';
   this.tick();
   this.isDeleting = false;
   

   };

   TxtType.prototype.tick = function() {
   var i = this.loopNum % this.toRotate.length;
   var fullTxt = this.toRotate[i];

   if (this.isDeleting) {
   this.txt = fullTxt.substring(0, this.txt.length - 1);
   } else {
   this.txt = fullTxt.substring(0, this.txt.length + 1);
   }
   
   this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
   
   var that = this;
   var delta = 200 - Math.random() * 100;
   
   if (this.isDeleting) { delta /= 2; }
   
   if (!this.isDeleting && this.txt === fullTxt) {
   delta = this.period;
   this.isDeleting = true;
   } else if (this.isDeleting && this.txt === '') {
   this.isDeleting = false;
   this.loopNum++;
   delta = 500;
   }
   
   setTimeout(function() {
   that.tick();
   }, delta);
   

   };

   window.onload = function() {
   var elements = document.getElementsByClassName('typewrite');
   for (var i=0; i var toRotate = elements[i].getAttribute('data-type');
   var period = elements[i].getAttribute('data-period');
   if (toRotate) {
   new TxtType(elements[i], JSON.parse(toRotate), period);
   }
   }
   // INJECT CSS
   var css = document.createElement("style");
   css.type = "text/css";
   css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
   document.body.appendChild(css);
   };

Resources

The JS code should be added to HEAD HTML section but you need to wrap it in these tags

(your code should be placed instead of ... (three dots)).

Gina