Horizontal scrolling open Navi on scroll end

[DK7]

Hi,

 

I can't get any further with one thing and I hope you can give me a tip.

 

There are several horizontal scroll areas and I would like the navigation to open at the very end, i.e. on the last scroll point, regardless of whether more scroll panels are added.

 

I know there is onLeave, so I could add another panel at the end and display the navigation with a scroll trigger. However, since the navigation can also be closed with an X, the user would then be on an empty page. Also, I think there has to be an easier way, right?

 

Does GSAP have a call that can be executed on the last scroll point and is also reverse-capable, so that the navigation can be closed again when the user scrolls back?

 

Thank you for your help friends 🙏

See the Pen vYdeBVq by dkx (@dkx) on CodePen

[Cassie]

Hey there! I'm not quite following I'm afraid.

A small detour quickly if you'll bear with me!

I'm not sure what's happening in the code snippet below? What are you trying to achieve with the two tweens I've commented out? With them commented out you have a horizontal scrolling effect - that's great! But the 'list-left' tween isn't doing anything, it's just repeating once and filling some space and I'm not sure I understand what the first one is for either, if you're aiming to animate the sections on the x axis, the last tween is handling that already.
 

  let sections = gsap.utils.toArray(".panel-section");
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".container-wrapper",
      pin: true,
      scrub: 0.1, 
      end: "+=2000",
    }
  })
  // .to(sections, {
  //   xPercent: -100 * 2,
  //   ease: "none", 
  // })
  // .to(".list-left", {
  //   repeat: 1
  // })
  .to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none"
  });

Also you're using smooth scrolling but you're not scrolling vertically at all, do you really need smooth scrolling? If you're just doing horizontal 'scrolling' you can add a scrub on to ease that section into place (much like smooth scrolling does)

(I've read through a few more times and maybe something like this is what you're after?)

See the Pen ZErXQQd?editors=11 by GreenSock (@GreenSock) on CodePen

[DK7]

43 minutes ago, Cassie said:

Hey there! I'm not quite following I'm afraid.

A small detour quickly if you'll bear with me!

I'm not sure what's happening in the code snippet below? What are you trying to achieve with the two tweens I've commented out? With them commented out you have a horizontal scrolling effect - that's great! But the 'list-left' tween isn't doing anything, it's just repeating once and filling some space and I'm not sure I understand what the first one is for either, if you're aiming to animate the sections on the x axis, the last tween is handling that already.
 

  let sections = gsap.utils.toArray(".panel-section");
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".container-wrapper",
      pin: true,
      scrub: 0.1, 
      end: "+=2000",
    }
  })
  // .to(sections, {
  //   xPercent: -100 * 2,
  //   ease: "none", 
  // })
  // .to(".list-left", {
  //   repeat: 1
  // })
  .to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none"
  });

 

Hi @Cassie,

 

thank you very much for your quick help!

 

Oh, I left the list-left container out of the example here so the code wouldn't be too long, but forgot the tween

I don't really know myself why I'm doing this ha

 

I had asked about this in my other forum post, where I had asked so many questions. It was about one or more panels stopping when scrolling before scrolling to the next panel. I thought that was called pinning. But pinning is apparently for the scroll trigger. Ultimately, you also pin the panel

 

So that e.g. the second panel remains as in my Codepen example, I always have to put a .to() between them. Otherwise it won't work.

I need this code so that the 2nd panel (section) remains.

 

.to(sections, {
 xPercent: -100 * 2,
  ease: "none",
 })
 .to(".list-left", {
   repeat: 1
  })

 

If I want the 3rd panel to remain standing as well, I would have to add this code next:

 

.to(sections, {
 xPercent: -100 * 3,
  ease: "none",
 })
 .to(".list-left-p3", {
   repeat: 1
  })

.list-left-p3 is just a wrapper placed in the 3rd panel.

 

Just like .list-left is a wrapper actually placed in the 2nd panel.

 

Only then can I add this code (tween):

 

  .to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none"
  });

So that all sections are scrollable.

 

In my other forum post I already asked why I always need an in-between tween for this to work

Without the ".list-left" the panel doesn't stay pinned.

 

 

 

43 minutes ago, Cassie said:

Also you're using smooth scrolling but you're not scrolling vertically at all, do you really need smooth scrolling? If you're just doing horizontal 'scrolling' you can add a scrub on to ease that section into place (much like smooth scrolling does)

 

 

The answer is simple: Without SmoothScrolling, the scrolling isn't that nice  

 

So far I didn't know that I could get the same effect in another way. I had therefore bought a GSAP license so that I could use the smoothScolling plugin  

 

How else do I do that? Do you have an example for me?

 

 

43 minutes ago, Cassie said:

(I've read through a few more times and maybe something like this is what you're after?)

 

 

YES! That looks exactly like what I need, very cool! I have to test this in my local test environment right away

 

That means I simply use my own scroll trigger that uses the entire page length of all sections as the end and can then use the callbacks to trigger the navigation function, right?

 

 

 

 

 

 

[DK7]

Tested ok and it works 🙏

 

Of course I didn't have to add my own ScrollTrigger but just use the first main trigger of the panels

 

Thank you for your help! Great! 👐

 

Regarding the other topic, can you explain to me why I always have to put a tween in between? Like here with ".list-left"? By the way, this can also be any other element in the panel, the main thing is that there is a tween before the last tween that scrolls the sections all horizontally

 

 

[Cassie]

Ah ok I get you now!

I think people tend to get confused because they think that things are 'scrollTrigger solutions'. It's best to think in terms of a timeline. I'd just tweak the position parameter rather than add an empty tween.

 

Maybe this visual helps?

See the Pen GRQMmbg?editors=1111 by GreenSock (@GreenSock) on CodePen