ScrollTrigger and React - Text in reverse scroll not as expected

[newguy123]

Hi

 

As per my StackBlitz below linked, I have 3 headings, each one coming up individually center screen as you scroll. As the heading comes in, it fades in from 0 opacity to 1 over a short duration, then fades out again as you continue scrolling. Weird thing though, in reverse, the heading just pops in straight from nothing to 1 opacity, instantly without it tweening it seems.

What am I doing wrong here?

I will have many more headings later, just 3 now for demonstration. As you can see I've commented out an image sequence which is 2000vh high so I need to show various headings, synced to certain parts in the image sequence. So perhaps there is a more accurate way to position the headings coming in, other than the % usage I'm using currently?

Also, can this entire thing be made more efficient? Seems I'm doubling up on code a lot.

 

Appreciate your thoughts, suggestions, help and advice

 

https://stackblitz.com/edit/react-zftzut?file=src%2FApp.js

[Toso]

try this one, forgive me i was too tired to create a new solution so I added an old one I used a long time ago till you have a better solution 😅, but it can be done in many ways a single tween or a loop with timelines 

 

 

 

 useLayoutEffect(() => {

    gsap.set('.heading-text', { opacity: 0 });

 

    let ctx = gsap.context(() => {

      gsap.to('.heading-text', {

        keyframes: [{ opacity: 1 }, { opacity: 0, delay: 1 }],

        stagger: 2,

        scrollTrigger: {

          trigger: '.heading-text',

          start: 'center center',

          end: '+=2000',

          scrub: 1,

        },

      });

    });

 

    return () => ctx.revert();

  }, []);