Jump to content
Search Community

GSAP show hide array of text on scroll

Viz test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...