27.10.2025

Lottie-animaatiot Builder.io:ssa

AI & Tech Lead

Janne Toikka

Builder.io-integraatiomme tukee Lottie-animaatioita älykkäästi, mutta Builder.io renderöi HTML:ää, joten tarvitsemme erityisen lähestymistavan.

Builder.io HTML-renderöinti vs React-komponentit

Builder.io:n toimintaperiaate eroaa merkittävästi perinteisistä React-sovelluksista. Siinä missä React-sovelluksessa komponentit renderöidään JavaScript-koodina, Builder.io generoi suoraan HTML-koodia.

Ratkaisu on nimetä Lottie-tiedostot SVG-päätteellä, vaikka ne sisältävät JSON-dataa. Builder.io hyväksyy ne kuvatiedostoina, ja meidän React-komponentti osaa tulkita ne oikein.

Tämä ratkaisu saattaa tuntua hackiltä, mutta se toimii luotettavasti. Builder.io:n käyttäjät voivat ladata animaatiotiedostoja samalla tavalla kuin tavallisia kuvia, ja järjestelmä hoitaa loput automaattisesti.

Implementaatio Pipeline

Prosessi alkaa Builder.io:n kentästä, jossa on useLottie-boolean-kenttä logossa. Tämä tieto kulkee läpi koko datapipelinen muuttumatta.

Data Transform -vaiheessa kenttä säilyy muuttumattomana. Tämä on tärkeää, koska meidän ei tarvitse tehdä mitään erityisiä muunnoksia datan kulkiessa Builder.io:sta React-komponenteille.

UI Component -tasolla Image-komponentti tekee lopullisen päätöksen renderöinnistä. Se tarkistaa sekä useLottie-flagin että tiedostopäätteen ennen päätöstä.

HTML vs React Hydration

Prosessi alkaa Builder.io:n HTML-generoinnista. Se luo tavallisen img-tagin, johon on lisätty data-attribuutteja React-hydraatiota varten.

React-sovelluksemme hydratoi tämän HTML:n ja korvaa tarvittaessa img-tagit Lottie-playereilla. Tämä tapahtuu sivun latauksen jälkeen, joten käyttäjä näkee ensin tavallisen kuvan, joka muuttuu animaatioksi.