Hide all other contents which have been scrolledd

[markhore]

i'm new to scrollTrigger or GSAP, I have different large sections, including horizontal scroll, when i reach below the horizontal section i want all past section to be hidden, only 1 section to be in view, user should't be able to scroll back, but there are tabs in header where use can click and see the other section, is it possible ?

 

do i have to create custom function to hide content when enter in specific section ? or is their native functionality ?

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Cassie]

It may be as simple as this though...
 

gsap.to('.hide-me', {
  opacity: 0,
  scrollTrigger: '.hide-me'
})

Take a look at ScrollTrigger

Hope this helps!

[markhore]

1 hour ago, Cassie said:

It may be as simple as this though...
 

gsap.to('.hide-me', {
  opacity: 0,
  scrollTrigger: '.hide-me'
})

Take a look at ScrollTrigger

Hope this helps!

Thanks a lot for the quick reply, i created the pen here 

See the Pen VwdxPVV by yasirhaleem (@yasirhaleem) on CodePen

 

When i  reached at section "After Horizontal Scroll" i shouldn't be able to see past content but able to move through the top menu tabs ONLY and show only related section ?, and when i click on "Home" everything start normally, is it possible ?

[GreenSock]

I'm having a very difficult time understanding what you want. You've got sections stacked vertically, but you say you want previous sections to be completely invisible once a new section enters the viewport? Are you saying it would suddenly just vanish while the new section scrolls into view? That seems super strange, so I'm probably misunderstanding. 

 

Are you trying to have a tabbed interface and the tabs swap at certain spots in the scroll? 

 

Almost anything is possible, but please keep in mind that these forums are not for getting free custom consulting or building out your projects - we really try to focus on GSAP-specific questions (like about the API). If you need more help, you can certainly seek paid consulting services by posting in the "Jobs & Freelance" forum or contact us directly. 

[markhore]

@GreenSock Thanks for your reply. sorry i couldn't explain it well.

 

i have three sections, when i react start of 2nd section wanted to remove the 1st section, i was doing it but there was a lot of empty space.

 

ScrollTrigger.saveStyles()

after hours of googling found that `saveStyles` were the solution., might help someone else.

 

if someone need help, available for paid consulting services 😀 🤗

[GreenSock]

Glad you found a solution, but I just want to warn you that ScrollTrigger.saveStyles() is deprecated because it really shouldn't be necessary anymore since GSAP 3.11.0 added revert() capabilities along with gsap.context() and gsap.matchMedia() which are a cleaner way to accomplish something similar. 

[markhore]

2 minutes ago, GreenSock said:

Glad you found a solution, but I just want to warn you that ScrollTrigger.saveStyles() is deprecated because it really shouldn't be necessary anymore since GSAP 3.11.0 added revert() capabilities along with gsap.context() and gsap.matchMedia() which are a cleaner way to accomplish something similar. 

Thanks a lot @GreenSock i will definitely look into this.