Scrollmagic timeline fade-in-out text not working as expected

Question

I've created a syncronized horizontal timeline slider which should also fade-in-out some text on top of another. Unfortunately I am unable to understand how I could fade out the last slide's text when the new one appears in a timeline logic - with images it's fine since they just stack on top of each other but the text tends to overlap.

 let tlb = gsap.timeline({
      scrollTrigger: {
        trigger: '.gsap-slider .section--inner',
        start: 'left left',
        end: 'right right',
        pin: true,
        horizontal: true,
        scrub: true,
        markers: true,
      },
      defaults: { autoAlpha: 0, yPercent: 10 },
    })

    tlb.from('.single-content.second', {}).from('.single-content.last', {})

View demo here: https://codepen.io/rulloliver/pen/oNddzEq

I've tried different approaches with fromTo and from but unfortunately now luck to understanding this. Guess the issue is in general how to crossfade the timeline instead of stacking on top the next one.

Any advice would be appreciated!

Scrollmagic timeline fade-in-out text not working as expected

0 Answers0