Problema creazione dinamica HTML da sorgente remota

[fermat]

ciao!

su un sito web voglio visualizzare i dati di un altro sito (sono entrambi miei).
quindi che ho fatto, ho preso il JSON da una API e creato l'HTML in maniera dinamica.
come classi CSS ho preso quelle del template.
questo il codice:

function getPostBlog() {
    const url = '....';
    let html = '';

    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            data.articoli.forEach(item => {
                let id = item.id;
                let alias = item.alias;
                let titolo = item.titolo;
                let categoria = item.categoria;
                let img = item.img;
                let creazione = item.creazione;

                html += '<div class="col-lg-6 mb-5 mb-lg-0">';
                html += '<article className="thumb-info custom-thumb-info-2 custom-box-shadow-1 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0" data-appear-animation-duration="1s">';
                html += '<div class="thumb-info-wrapper">';
                html += '<a href="#">';
                html += '<img src="" alt="' + titolo + '" class="img-fluid">';
                html += '</a>';
                html += '</div>';
                html += '</article>';
                html += '</div>';

                console.log(html);

                document.getElementById('blog_html').innerHTML = html;
            });
        });

}

cosi vengo visualizzati, ma con un CSS errato.
se vedete nel tag article ho messo className.
se metto solo class, come dovrebbe essere, i dati ci sono, ma non si vedono.
come se non prendesse il CSS.

ma se copio e incollo l'HTML creato, e lo metto staticamente nella pagina, funziona tutto.
non so se mi sono riuscito a spiegare....

[fermat]

ok, il problema sta in appera-animation, che viene usato da un altro plugin js del template.
levandolo si vede tutto, ma senza animazioni.
probabilmente è un problema di "sincronizzazione" tra i due script.