Animation with js

gistfile1.txt

var appendAnimation = {
    appendChar: '_',
    timer: 100,
    text: "",
    initialValue: 0,
    data: '',
    state: true,
    init:  function (elementId) {
        this.dom  = document.getElementById(elementId);
        this.text = this.dom.innerText;
        this.start();
    },
    start: function () {
        setTimeout(this.animation.bind(this), this.timer);
    },
    blink: function () {
        if (this.state === true){
            this.dom.innerHTML = this.text;
            this.state = false;
        }else{
            this.dom.innerHTML = this.data;
            this.state = true;
        }
    },
    animation:  function () {
        var dataset = '';
        if (this.initialValue === 0)
            this.data += this.text.charAt(this.initialValue) + this.appendChar
        else {
            this.data = this.data.substr(0, this.initialValue) + this.text.charAt(this.initialValue) + this.appendChar
        }
 
        this.dom.innerHTML = this.data;
        this.initialValue++
        if (this.initialValue < this.text.length) {
            this.start();
        }else{
            setTimeout(this.clear.bind(this), 5000);
        }
    },
    clear: function(){
        this.initialValue = 0;
        this.data = '';
        this.start();
        
    }
}


var placeholderAnimation = {
    appendChar: ' _',
    timer: 100,
    text: "",
    items: ['Search'],
    initialValue: 0,
    data: '',
    state: true,
    dom: '',
    currentItems: 0,
    init:  function (elementId) {
        this.dom  = document.getElementById(elementId);
        this.text = this.dom.placeholder
        this.start();
    },
    start: function () {
        setTimeout(this.animation.bind(this), this.timer);
    },
    blink: function () {
        if (this.state === true){
            this.dom.placeholder = this.text;
            this.state = false;
        }else{
            this.dom.placeholder = this.data;
            this.state = true;
        }
    },
    animation:  function () {
        var dataset = '';
        if (this.initialValue === 0)
            this.data += this.text.charAt(this.initialValue) + this.appendChar
        else {
            this.data = this.data.substr(0, this.initialValue) + this.text.charAt(this.initialValue) + this.appendChar
        }
 
        this.dom.placeholder = this.data;
        this.initialValue++
        if (this.initialValue < this.text.length) {
            this.start();
        }else{
            // setInterval(this.blink.bind(this), this.timer);
            setTimeout(this.clear.bind(this), 1000);
        }
    },
    clear: function(){
        if(this.currentItems == this.items.length-1){
            this.currentItems = 0;
        }else{
            this.currentItems++;
        }
        this.dom.placeholder = "";
        this.text = this.items[this.currentItems];
        this.initialValue = 0;
        this.data = '';
        this.start();
        
    }
}