Sticky fading banner help

[cbozero]

Hello everyone,

 

I have just discovered ScrollTrigger and have done a couple of beginner tutorials. It's great! My main goal for now is to create a sticky banner bar with some text and a button that fades in/out as I scroll. What I am going for can be seen at this link. Do you have any guidance or tutorials that would help me get started in the right direction to achieving this result?

 

Thanks!

[Cassie]

The logic in the nav looks be listening to whether the user is scrolling up or down and hiding or showing the nav accordingly. So this is a little different to most of the scrollTrigger demos you'll see.

You can listen for scroll direction with scrollTrigger though. Something like this would be a good start.

 

ScrollTrigger.create({
  trigger: "body", // the main scrolling element
  start: 0, // start at top
  end: "max", // end at bottom
  onUpdate: self => {
    console.log("direction:", self.direction);
    // custom logic to handle the nav animation
  }
});

Why don't you put together a minimal demo - give it a go! we'll be here if you get stuck.

[cbozero]

Thanks, I have been learning more and have achieved a similar result to the Rothy's lander, but not quite as good. Their page transitions the animations seamlessly as content continues behind. 

 

Here is what I have so far!

 

I still have to try tinkering with your suggestion as well.

 

See the Pen rNwNgXL by cboaty (@cboaty) on CodePen

[Cassie]

Ah! Apologies.

I thought you were talking about the nav as you mentioned 'sticky' - Ignore that previous advice.

This banner doesn't have to be pinned - you could position them all fixed at the bottom and then flip between them onToggle.

Take a look at this solution -

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

Happy to talk through any of it if you have questions ☺️

[cbozero]

This is much better, thank you! How can I make it scrub with scroll? I tried adding a scrub:1 rule under scrollTrigger, but it didn't work. 

[Cassie]

Great!

Could you explain what you're trying to achieve by making it scrub with scroll? What are you expecting the result to be?

* Currently you can't really 'scrub' as the animations are just being triggered as the sections are 'toggled' i.e. entering and leaving.

[cbozero]

I see. I don't really need that capability. It was more of a curiosity as I was just playing around with it and it wasn't working. Your explanation makes sense. Thanks!