Figo's post in Is stagger animations possible with scrollTrigger in GSAP (ReactJS) was marked as the answer
Regardless I managed to create the desired effect, thanks to you Jack
useEffect(() => {
gsap.from([headlineFirst, headlineSecond , contentP], {
y: (i, target) => {
return target.classList.contains("contentP") ? 20 : 49;
},
opacity: (i, target) => {
return target.classList.contains("contentP") ? 0 : 1;
},
duration: 1,
ease: Power3.easeOut,
stagger: 0.3,
scrollTrigger: {
trigger: ".aboutV2",
start: "10% 100%",
markers: true,
toggleActions: "play none none pause"
}
});
}, []);
