Non-fullpage slider with pinned element

[DemonEX]

Hello there,

 

I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled.

Please, look at the example i have prepared.

 

I've made a slider that work, but so many bugs there  Could you please help me to find a better way to solve my problem?

See the Pen QWzwJVX by rojangsc-the-selector (@rojangsc-the-selector) on CodePen

[Cassie]

Hi there,

Maybe this demo will be of use?

 

See the Pen LYMVPVa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[DemonEX]

@Cassie Hi, Cassie!

 

Thanks a lot for your answer. I'm going to deal with this example, but, omg, i can't even understand how it works 🫣 

[Cassie]

Heya, well I'd be happy to help with your demo instead, but I'm not sure what you meant by "so many bugs" 
If you can explain a little more clearly about your goal there may be a simpler solution?

Similarly if you're confused about a specific part of the other demo I linked to then I'll happily explain. There are a ton of comments in the code though, so maybe just step through slowly, read the observer docs and pop back if you're still confused?

 

https://greensock.com/docs/v3/Plugins/Observer

I've simplified that demo slightly and replaced it in case that helps?

 

[Rodrigo]

Hi,

 

I agree with Cassie, it would be great if you could be as explicit as possible about the issue you're having.

 

Based on the title of your thread and the codepen demo you posted it seems that you don't want the space after the horizontal section that is created by pinning said section (the one with class="advantages-list-1"). If that's the case the best approach is to wrap the target section and the next one in an extra element and pin that parent element. I made a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[DemonEX]

@Cassie @Rodrigo

 

First of all, I really appreciate your help and participation.

 

Thanks to Cassie's example, I've created a solution that is very close to my expectations. The delay after pinning and before unpinning is a little bit confusing, but it's ten times better than what I had before.

v2

 

The next question is about the "intentObserver" part of the example. I don't quite understand how it prevents normal scrolling. Therefore, I'm planning to study the documentation that Cassie attached to her last comment.

[Rodrigo]

Hi,

 

The reason is this config right here:

const intentObserver = ScrollTrigger.observe({
  // ...
  type: 'wheel,touch',
  preventDefault: true,
});

Basically the Observer instance is preventing the default event action from happening. Is worth noticing that this only prevents wheel and touch events, so in a desktop/laptop browser the user could still drag the scroll bar and scroll normally which will lead to unexpected behaviour, that and the reason that it was intended originally for being used internally is the reason is not documented.

 

Happy Tweening!