show/hide header on scroll with ScrollSmoother and ScrollTrigger

[Alex.Marti]

Hello gsap community,

 

I struggle to find the right solution to implement a hide/show header on on scroll with ScrollSmoother.  Especially on touch devices.

 

In my codepen you can see that I've set  normalizeScroll:false  It works well on desktop and tablet (only if I set smoothTouch:true, otherwise the header section becomes laggy), but it's quit laggy in mobile device. If I set normaliseScroll:true the scroll isn't fluid in Tablet device.

 

I tried differents combinaisons between smoothTouch:false and smoothTouch:true as well, and for now I can't find the right combinaison to make it works everywhere.

 

Any advice for this particular case?

 

Thanks a lot for you help,

 

Alex

See the Pen jOQeOxr by iamalexm (@iamalexm) on CodePen

[Alex.Marti]

Ok so I found a workaround  : I only create a ScrollSmoother instance on desktop devices using @Cassie's tips in another thread :  I check  ScrollTrigger.isTouch and only when it's false I create the ScrollSmoother.

 

if(!ScrollTrigger.isTouch){
  const smoother = ScrollSmoother.create({
      wrapper: ... ,
      content: ...,
      ...
  });
}

It's not ideal because I'd like to make it works on every devices but at least I have a good user exeprience on my website.

[Rodrigo]

Hi,

 

You can also add a fixed header outside the Smooth Wrapper element and use ScrollTrigger to show/hide it depending on the scroll direction

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

 

Hopefully this helps.

Happy Tweening!

[Alex.Marti]

2 hours ago, Rodrigo said:

Hi,

 

You can also add a fixed header outside the Smooth Wrapper element and use ScrollTrigger to show/hide it depending on the scroll direction

 

 

 

Hopefully this helps.

Happy Tweening!

 

Hello @Rodrigo,

 

Thanks for the tip. It's too late to try this way for my current project because I'm working with wordpress and my code is already in an advanced stage.

 

But I'll definitely try this way for my next project, that will happen very soon...

 

I'll let you know if it works better 🤞

 

Alex

[Cassie]

Glad that helped! Also your dog is v cute. 🥰