Update Text positions on scroll with GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
<style>
#hero {
height: 100vh;
background-color: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
position: relative;
font-size: 4rem;
color: #fff;
text-align: center;
}
[data-subtitle] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.5em;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
opacity: 0.05;
}
.intro {
height: 100vh;
background-color: #222;
}
</style>
<div id="hero">
<h1>
<span data-title>This is main title</span>
<span data-subtitle>This is big secondary title</span>
</h1>
</div>
<div class="intro"></div>
<script>
gsap.fromTo(
document.querySelector('[data-subtitle]'),
{ yPercent: -50 },
{
yPercent: 100,
ease: 'none',
scrollTrigger: {
trigger: '#hero',
scrub: true,
start: "clamp(top bottom)"
}
}
);
</script>