I managed to get it working, here was my final code:
const sections = document.querySelectorAll('section');
let loadingSectionAnimation = true;
sections.forEach(section => {
const sectionHeader = section.querySelector('h1');
const sectionAnimation = gsap.from(sectionHeader, {
paused: true,
duration: 2,
yPercent: 200,
});
ScrollTrigger.create({
trigger: section,
start: 'center bottom',
onEnter() {
if (loadingSectionAnimation) {
gsap.set(sectionHeader, {
yPercent: 0,
});
return;
}
sectionAnimation.play();
},
});
});
loadingSectionAnimation = false;
Thank you for your help