I am using GSAP with React (Nextjs, tho it doesn't really matter). I want to make a scene where some items appear to tell a story, using GSAP ScrollTrigger and scrubbing (instead of playing animations once for example). I provide a timeline with a context so I can make use of it anywhere inside of the scene tree with const tl = useTimeline().
The default config is:

let config = {
  scrollTrigger: {
    trigger: triggerSelector,
    start: "top top", 
    end: "+=2000", 
    pin: true, 
    scrub: 0.8,
    autoRemoveChildren: true,
    markers: true,
  },
};
tl.addLabel("firstpart", 0);
tl.addLabel("secondpart", "firstpart+3");
tl.addLabel("thirdpart", "secondpart+3");

Everything works just fine, but the thing is I want to have granularity with how and when I show each element in the scene. I am using the labels so I fire the animation when a label starts but it gets weird because I am using scrub and timing durations with seconds don't go really well with it (I guess?).

Let's see it in action inside my scene, I have the first element that is a person png that appears when you start scrolling inside the scene:

useGSAP(() => {
  if (!tl) return;

  tl.from(
    personRef.current,
    {
      opacity: 0,
      scale: 0.8,
      duration: 2,
      ease: "power4.inOut",
    },
    "firstpart"
  );
  tl.to(
    personRef.current,
    {
      opacity: 0,
      scale: 0.6,
      duration: 2,
      ease: "power4.inOut",
    },
    "+=1"
  );
}, [tl]);

How would you approach it the best to make the person appear in 2 seconds, then stay the whole scene while scrubbing and dissapear on end. I have some elements that follow the same approach but dissapear almost instantly after making them appear.

I hope this is understandable, I am not a native english speaker so any questions I'll answer!