<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Split Text Animations</title>
<style>
.ys-cool-split {
width: 85%;
font-size: 2rem;
color: rgba(255, 255, 255, 0.125);
transition: color 0.3s;
margin: 50vh 0; /* Added margin to simulate scrolling */
}
body {
margin: 0;
background-color: #111;
}
</style>
</head>
<body>
<h2 class="ys-cool-split">First Split Text Animation</h2>
<h2 class="ys-cool-split">Second Split Text Animation</h2>
<h2 class="ys-cool-split">Third Split Text Animation</h2>
<!-- Place your JS scripts here, at the end of the body -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('.ys-cool-split').forEach(element => {
const split = new SplitType(element, { types: 'words, chars' });
const tl = gsap.timeline({
scrollTrigger: {
trigger: element,
start: 'top 85%',
end: 'top 15%',
scrub: 0.5,
},
});
tl.set(split.chars, {
duration: 0.3,
color: 'white',
stagger: 0.1,
}, 0.1);
});
</script>
</body>
</html>
