Splitting: sezionare elementi per produrre animazioni

Splitting è, come definiscono gli autori del progetto, una "microlibreria" JavaScript formata da una collezione di "sotto plug-in" il cui scopo è quello di "sezionare" un elemento HTML in più parti, in differenti modalità: parole, caratteri, elementi figli, aree e cosi via.

Splitting non produce di per sé animazioni, ma fornisce gli elementi e gli strumenti necessari alla produzione delle animazioni stesse (e transizioni) attraverso librerie Javascript o semplicemente tramite CSS3. La logica che risiede alla base di questa soluzione è alquanto semplice:

1. la classe viene richiamata su un "target".
2. Vengono prodotti degli elementi span
3. Vengono prodotte le variabili CSS  (ad esempio <span class="word" style="--word-index: 0">
4. Viene generato e restituito un array di sezioni.
5. Viene infine aggiunta un'eventuale animazione JavaScript o CSS alle varie sezioni appena prodotte.

Ad esempio, la classe Splitting div

<div data-splitting>ABC</div>
<script> Splitting(); </script>

mentre il risultato finale dopo il parsing prodotto dalla libreria produrrà il seguente DOM:

<div data-splitting class="words chars splitting" style="--word-total:1; --char-total:3;"><span class="word" data-word="ABC" style="--word-index:0;"><span class="char" data-char="A" style="--char-index:0;">A</span><span class="char" data-char="B" style="--char-index:1;">B</span><span class="char" data-char="C" style="--char-index:2;">C</span></span></div>

Nella pagina ufficiale del progetto troviamo una ricchissima documentazione

Le demo sono tantissime, sia nella documentazione, sia nelle varie pagine di presentazione del software, sia nella altrettanto ricca pagina demo CodePen

Via Splitting