Animated Sections with GSAP Observer and ScrollTrigger

[WB00112]

Original: 

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

 

I want to achieve the following:
I want to scroll through the page in a normal way. So first, I scroll through the intro. Then, when div.wrapper reaches the top of my screen, I want to pin it using ScrollTrigger. At that point, I only want to swipe through the swiper using this Observer. Once I reach the end of my swiper, I want to continue scrolling through the page, and the Observer can stop at that point.

 

I'm having trouble making this work. Can anyone help me?

 

See the Pen RNbowOQ by wibl (@wibl) on CodePen.

[mvaneijgen]

Hi @WB00112 welcome to the forum!

 

Check out the following demo how you can mix normal scrolling and the Observer plugin. Hope it helps and happy tweening! 

 

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

[WB00112]

Hi @mvaneijgen,

 

Exactly what I needed. Now I just have to make sure that on a Macbook trackpad they don't go forward two slides, but 1 at a time. I think I can figure that out.

 

Thanks!

[Rodrigo]

Hi,

 

In the code of the Observer instance there is actually a workaround for that:

let allowScroll = true; // sometimes we want to ignore scroll-related stuff, like when an Observer-based section is transitioning.
let scrollTimeout = gsap.delayedCall(1, () => allowScroll = true).pause(); // controls how long we should wait after an Observer-based animation is initiated before we allow another scroll-related action

onEnable(self) {
  allowScroll = false;
  scrollTimeout.restart(true);
  // when enabling, we should save the scroll position and freeze it. This fixes momentum-scroll on Macs, for example.
  let savedScroll = self.scrollY();
  self._restoreScroll = () => self.scrollY(savedScroll); // if the native scroll repositions, force it back to where it should be
  document.addEventListener("scroll", self._restoreScroll, {passive: false});
},

Hopefully this helps

Happy Tweening!

[WB00112]

@Rodrigo
Thanks for thinking along. Yes I saw it. It only works if I set this value:

let scrollTimeout = gsap.delayedCall(1, () => allowScroll = true).pause();

to 2. Then my mac touchpad ensures that I swipe a maximum of 1 at a time on scroll.

Now it takes too long for my feeling to swipe further. So I think I have to keep it at 1 and fix it in another way.

 

[Rodrigo]

Yeah, one of the purposes of that particular code is to prevent those particular issues on trackpads and momentum scrolling. Basically trackpads keep firing the wheel event after the finger interaction because of that momentum scrolling, so for really strong and fast swipes that could take longer than 1 second. Unfortunately, as far as I know, there is no other way to prevent that I'm afraid, the only other option I can think of is check how fast wheel events are triggered by the trackpad with momentum scrolling and perhaps block those events if less than say 200 milliseconds have passed between events don't run the code.

 

As mentioned in other threads basically these are just hacks to avoid a natural browser behavior that doesn't have an API for doing this I'm afraid.

 

Good luck with your project! 👍 

[WB00112]

@Rodrigo

I'm facing a complex issue.
 

This works fine as it is, but let's say the content of a panel is taller than the height of my screen. In that case, you should be able to scroll within the panel until you've reached the end of its content, and only then continue scrolling to the next panel.
 

Is something like this possible?

I think that within

ScrollTrigger.create({ .. 

});

something has to change to make this possible right?

[Rodrigo]

Yeah that's a far more complex issue since you have the Observer Plugin preventing the default scrolling behaviour. The only way I can think of is to keep using the Observer Plugin and extend the conditional logic in order to translate that content inside it's parent container but without going to the next slide/panel.

 

Another option is to create a custom scroll bar that can be used by dragging, but as mentioned this is a complex scenario and beyond the scope of the help we provide in these free forums, unfortunately we don't have the time resources to create complex demos or solve convoluted  logic issues for our users.

[WB00112]

@Rodrigo

 

Ah okay, I get it.
Thanks!