Run results for: Vevet.SplitText vs SplitType vs GSAP.SplitText / Split into lines, words and letters

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser: Chrome 149

Operating system: Windows

Device Platform: Desktop

Date tested: 20 hours ago

Test name	Executions per second
Vevet.SplitText	1825.7 Ops/sec
GSAP.SplitText	1043.8 Ops/sec
SplitType	1284.8 Ops/sec

HTML Preparation code:

<div id="container"></div>

<script src="https://cdn.jsdelivr.net/npm/vevet@5/lib/cdn/vevet.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
<script src="https://unpkg.com/split-type@0.3.4/umd/index.min.js"></script>

Script Preparation code:

function createText() {
	const container = document.getElementById('container');
	
	const element = document.createElement('div');
	element.setAttribute('id', 'split');
	element.innerHTML = 'Testing SplitText Performance <em>Between</em> Libraries. This <strong>benchmark</strong> includes <a href="#">links</a>, <em>italic</em>, and <u>underline</u>.';
	container.appendChild(element);
	
	return element;
}

Tests:

Vevet.SplitText
const element = createText(); const instance = new Vevet.SplitText({ container: document.getElementById("split"), letters: true, lines: true, }); instance.destroy(); element.remove();
GSAP.SplitText
const element = createText(); const instance = SplitText.create("#split", { type: "words, chars, lines" }); instance.revert(); element.remove();
SplitType
const element = createText(); const instance = new window.SplitType(document.getElementById("split"), { types: ['words', 'chars', 'lines'] }); instance.revert(); element.remove();