Text reveal example

Text to reveal

Text to reveal

Text to reveal

Text to reveal

        <html>
	<head>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
		<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
		<style>
body {
	margin: 0;
	padding: 0;
}

.to-reveal-simple__letter-wrapper {
	display: inline-block;
	overflow: hidden;
}

.to-reveal-simple__letter--space {
	/* set width for empty space */
	width: 0.3em;
}

.to-reveal-multiline-width {
  width: 100px;
}

		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
		<article class="container"><h1>Text reveal example</h1></article>

		<article class="container">
			<h1 class="to-reveal-simple">Text to reveal</h1>
			<h1 class="to-reveal-stagger">Text to reveal</h1>
			<h1 class="to-reveal-multiline-width to-reveal-multiline-simple-width">Text to reveal</h1>
			<h1 class="to-reveal-multiline-width to-reveal-multiline-stagger-width">Text to reveal</h1>
		</article>

	</body>
</html>

<script>
		const addRevealFuncionality = (containerSelector) => {
						const textsToRevealEl = document.querySelector(containerSelector);

						const texts = textsToRevealEl.innerText;
						textsToRevealEl.innerText = '';


						texts.split('').forEach((letter) => {
										console.log(letter);
										const spanEl = document.createElement('span');
										const divEl = document.createElement('div');
								    spanEl.appendChild(divEl);
										divEl.innerText = letter;
										divEl.classList.add('to-reveal-simple__letter');
										spanEl.classList.add('to-reveal-simple__letter-wrapper');
										if (letter === ' ') {
														divEl.classList.add('to-reveal-simple__letter--space');
										}
										console.log(textsToRevealEl);
										textsToRevealEl.appendChild(spanEl);
								});

				}

    addRevealFuncionality('.to-reveal-simple');
		const timeline1 = gsap.timeline();
		timeline1.fromTo('.to-reveal-simple .to-reveal-simple__letter', { y: '100%'}, {y: 0, duration: 0.8});

    addRevealFuncionality('.to-reveal-stagger');
		const timeline2 = gsap.timeline();
		timeline2.fromTo('.to-reveal-stagger .to-reveal-simple__letter', { y: '100%'}, {y: 0, stagger: 0.1});

    addRevealFuncionality('.to-reveal-multiline-simple-width');
		const timeline3 = gsap.timeline();
		timeline3.fromTo('.to-reveal-multiline-simple-width .to-reveal-simple__letter', { y: '100%'}, {y: 0, duration: 0.8});

    addRevealFuncionality('.to-reveal-multiline-stagger-width');
		const timeline4 = gsap.timeline();
		timeline4.fromTo('.to-reveal-multiline-stagger-width .to-reveal-simple__letter', { y: '100%'}, {y: 0, stagger: 0.1});
</script>