[timeline start]

Thanks, I'll use 2 different timelines synchonized : one for the images, one for the texts. Thanks for the tips.

[timeline start]

I've found a solution for #1 that works ok.

I added a margin-top in css + set start to 'top 50%'.

See the Pen Pojvdpo by eZoulou (@eZoulou) on CodePen

[timeline start]

Here it goes, a simplier demo inspired by your proposal :

See the Pen yLXWKra by eZoulou (@eZoulou) on CodePen

Any idea on how to :

1/ have #screen2 sccrollTrigger (and further screens) starts only after the intro text effect has ended?

2/ have titles (h3.screen2, h3.screen3 etc) start showing before the previous one is fully hidden? (I tried pinSpacing: false to shorten the delay between appearance/disapearance).

Regards,

F

 

[timeline start]

Hi Cassie, Thank u for taking the time to answer. Really much appreciated

I'm looking into that now.

[timeline start]

Fair enough

Here it is . It's about the #intro h2.xl apparition effect not reverting well while scrubbing (scrolling back up).

See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen

Thanks a lot for the attention.

By the way, as well as I would like to understand the reason of the 'bug', I have found a workaround by using a callback

onLeaveBack: () => {
  // Workarround scrub not showing back titles.
  gsap.set('h2.screen'+ (i+2), { display : 'block'}, 0.0001);
}

 

[timeline start]

I already checked the common mistakes  

But I'll check again.

Anyway I removed the main timeline (I did read somewhere it was better this way) but still the titles won't re-appear...

See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen

[timeline start]

OK I got it now.

It's getting better but I still have a rewind (scrub) issue : the h2.xl titles won't come back when I scroll back up.

Here is a more complete example :

See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen

Thanks for the attention,

F

 

[timeline start]

Thanks for the answer. The little delay hack does not quite work but the onToggle is promissing. I'll get back if needed.

Cheeers, F

[timeline start]

Hi Folks,

This is my first GSAP project and I'm delighted.

Here is an issue I've got since a couple of days so I figured I'd ask for help :

I did expect the #intro to be hidden only when the red_timeline starts (so when #screen_red enters viewport).

But in practical, the red_timeline starts as soon as page loads.

Any advice?

Cheers,

Florent

 

See the Pen QWgoeyg by eZoulou (@eZoulou) on CodePen