GSAP show hide array of text on scroll

[Viz]

Hi Forum,

 

I have a simple yet eluding problem to solve. Sorry for a crappy codepen, its not very close to what I need but just a reference. 

 

My requirement is that I want to pin a container that has 3 blocks of text. When scrolling through this pinned container, the 3 blocks of text should show themselves one by one. But when the next block shows, the previous one should hide itself, meaning, at a time only one of the blocks would show (The other ones should not ever take any space on the container - so they have to be display: none.). 

See the Pen KKNdeKj by vsaini603 (@vsaini603) on CodePen.

[mvaneijgen]

I've restructured your code a bit to help me understand it better. I always try to create as less ScrollTriggers as I need and combine things to a timeline if possible, so that is what I also have done here. The ScrollTrigger is on your `.mycontainer` and the items within animate.

 

I've stolen the code from the following codepen (codepen.io/snorkltv/pen/301cb98dc1d0ce7ef0e90304f4de12be) (it from great GSAP course btw)

 

The trick is too stagger in the elements on a certain timing and have them animate out on the exact same timing , right here it is `0.8`. Notice that the variable `stagger` is called three times in the timeline, two times for the stagger and the last one is to have the .to() start at `0.8` when it has finished the first stagger.

 

See the Pen NWbGoxJ by mvaneijgen (@mvaneijgen) on CodePen.

 

Hope it helps

[Viz]

Hi @mvaneijgen,

 

This is extremely helpful. I was trying to stagger each element by running through a loop but I see now why that was wrong. 

 

I still have the problem that it doesn't completely hide the first element before showing the next one. That is, there is a scroll area where I can see both the texts even if I use autoAlpha with display:none. 

See the Pen dyOYrjB by vsaini603 (@vsaini603) on CodePen.

Once again, thanks for responding so promptly with a easy solution.

[mvaneijgen]

@Viz checkout https://greensock.com/docs/v3/GSAP/Timeline at "Positioning animations in a timeline". Right now the animation of the removing starts `0.8` ms if you want to have this faster you have to decrease this number, try replacing the stagger variable with something like "0.4"

 

I have also the feeling that you want to have the text at the same spot every time, if so try and position the elements with just CSS  on top of each other (not in GSAP), then the animation can stay the same.

[akapowl]

 

Hey @Viz

 

Since your ScrollTrigger has a scrub applied, you would rather/also want to read on this

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

because durations and the position parameter work in a different way on scrubbing ScrollTrigger animations than they do on regular tweens/timelines.