blast

Installation

Blaster.js

import $ from 'jquery'
import './blast.min.js' // module retouché pour webpack

var letters = [];

const Blaster = {};

Blaster.animateLetters = function(titleId, i) {
    var i = i == undefined ? 0 : i;
    letters[titleId][i].classList.add('blast--in');
    
    if (i < letters[titleId].length - 1) {
            Blaster.animateLetters(titleId, i + 1);
    }
}

Blaster.addBlast = function(titleId) {
    letters[titleId] = [];
    $('#'+titleId).blast({ 
        delimiter: 'letter',
        customClass: titleId+'-letter' 
    });

    //document.getElementById(titleId).innerHTML = document.getElementById(titleId).innerHTML.replace(/-\?/g, " ?");

    setTimeout(()=>{
        letters[titleId] = Array.from(document.getElementsByClassName(titleId+'-letter'));
        letters[titleId].forEach(letter => {
            letter.innerHTML = ''+letter.textContent+'';
        });
    }, 50); 
}

export default Blaster;

CSS

.blast {
    overflow: hidden;
    display: inline-block;

    span {
        display: inline-block;
        transform: translate3d(0, 100%, 0) scaleY(1);
        opacity: 0;
    }

    &--in {
        span {
            opacity: 1;
            transition: .75s all ease;
            transform: translate3d(0,0,0) scaleY(1);
        }
    }
}