Proper Setup for Scroll Header

[aarouni]

Hi there again lovely GSAP community 👋🏻

 

I've tried various approaches to create a scroll based Header but wasn't able to come to a satisfying result 😔 I hope some of you might point me in the right direction.

 

What I am trying to achieve

This in a full height page header, pinned at start.

1. From the start: show a slider (just a text for simplification for the moment)
2. When the user starts scrolling the foreground/text of the slider is hidden, but the the background image is kept
3. A large card appears on top of it in the center
4. Then multiple "slides" inside that card are traversed through when scrolling
   Simplified text-only slide for now...this will be more complex in the final version with an illustration besides text, both will be animated...not fully sure what animation I want to use there between the cards.
5. When the last card is reached and the user scrolls on the header is unpinned and the normal rest of the page's content follows.

Visual:

 

 

 

Approaches I tried

I tried multiple approaches but could not reach a good state while trying (and struggling) quite a bit 😬

 

The best was in this direction:

 

Basically each "step" listed above has a label, then it will snap to these labels. I tried with lots of different values for timing and snapping, but just couldn't get it to feel good enough. Also the feeling is quite different for a touchpad or a mousewheel - have not even tried mobile 🥵

 

 

Looking for help ❤️

I am very unsure if the whole setup I am trying makes sense or if there is a much better way to set things up.

The feeling / behaviour I am looking for would be much more like https://alvarotrigo.com/fullPage where for each "scroll tick" it goes right to the next "step"...I never want to "wait to much" in between steps or "land in a in-between state".

Is there maybe a better way to achieve this withoutscrub& snap?

 

I found many demos (also official ones) that show you a behaviour where you



Would really appreciate help!
Aaron

 

 

See the Pen dPyYvRZ by aaronmeder (@aaronmeder) on CodePen.

[mvaneijgen]

 

20 minutes ago, aarouni said:

Is there maybe a better way to achieve this withoutscrub& snap?

Yep, there is and it is called the Observer plugin. ScrollTrigger is build to hook an animation  to the visitor scrollbar, but you don't want that, you want when X happens animate to the next slide and that is where the Observer plugin comes in. Check out my post below you can keep your timeline with all the labels and just setup an Observer and you're golden. 

 

Hope it helps and happy tweening! 

 

 

[aarouni]

@mvaneijgen Observer looks wonderful, thank you so much for pointing me to it!

👉🏻 I've actually made an updated Codepen if anyone is looking for a similar solution: 

See the Pen pvogzNE by aaronmeder (@aaronmeder) on CodePen.

 

How to best disable / reenable the observer...or "get out of / back" into the section

One thing I wondered however about the Observer solution: what is the best way to "get out" of the section when the timeline played through but also be able to come back up to that section and play the timeline backwards again?

 

How I tried to solve it (see full code in the updated codepen):

 

When traversing through the timeline (called by observer goUp/goDown) and there is no next label I'll disable the observer. This allows me to scroll past the header section:

if (window.tl.nextLabel() === undefined) {
  window.observer.disable();
}

When creating the Observer I've added an onDisable listener:

// an observer listens for scroll wheel or touch eventes and steps through our timeline labels
window.observer = Observer.create({
  // ...
  onDisable: () => {
    onDisableObserver();
  },
});

that is called in the above case and then creates a ScrollTrigger to reenable the Observer if needed:

 

/*
 * Disable the initial observer
 * But make sure it can be reactivated if we come back to the header
 */
function onDisableObserver() {
  // create a scroll trigger to enable backward path
  window.stObserver = ScrollTrigger.observe({
    target: ".header",
    start: "top top",
    type: "wheel,touch,pointer", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")
    onUp: () => {
      console.log("st observer onUp");
      if (!window.observer.isEnabled) {
        window.observer.enable();
      }
    },
    onDown: () => {
      console.log("st observer onDown");
    }
  });
}

This doesn't look clean to me, but works 😅

 

Is there a better best practices approach when it should be possible to achieve "going out of the pinned header section / going back through the timeline"?

 

Thanks so much again 🙌🏻

Going to implement that approach on my site tomorrow - wish me luck 😬

 

Aaron

[Rodrigo]

Hi,

 

Here is a setup that uses Observer in the Hero section:

See the Pen BagroVM by GreenSock (@GreenSock) on CodePen.

 

Hopefully that helps

Happy Tweening!

[aarouni]

@Rodrigo

thanks for sharing! This feels clean...but glad I was actually on a pretty good way not far from that 😉