ScrollTrigger / Observe Slider on page section

[fakesamgregory]

Are there any examples of something like fullpage.js that appears midway through a 'normal' scrolling website.

 

I've been playing around with many different solutions from pinning, to horizontal scroll all using ScrollTrigger/Observe but I just can't quite get a slider that is 'locked' in 'fullpage mode' unless the user scrolls past the last slide or backwards past the first slide that has an level of resistance between each slide..

 

Here is the progress I've made. An attempt to show what I'm trying to achieve but it's not working for me. Maybe my CSS is wrong, maybe my approach is wrong. Any thoughts/guidance/examples would be great!

See the Pen qBymbWe by FakeSamGregory (@FakeSamGregory) on CodePen

[Rodrigo]

Hi,

 

You can use either the container animation approach that ScrollTrigger has:

https://greensock.com/3-8/#containerAnimation

 

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

 

Or you can use the Observer Plugin mixed with ScrollTrigger in order to listen to specific events in a particular section while preventing the default effect:

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

 

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

 

Hopefully that's enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[fakesamgregory]

Thank you @Rodrigo. Yes I looked at these solutions and while they get close, they don't quite work in combination. 

 

Similarly to the first example, I want a section at the top that scrolls "normally" and as the user scrolls down to a certain section, instead of the horizontal scroll scrubbing with the scroll, the page gets 'caught' like in the second example. The issue with Observer is that the user cannot be scrolling/the window needs to be still for the Observer to take hold. As can be seen from my example, if I 'flick' the page, I'm able to scroll past the Observe section. It's only if I allow the scrolling to come to a standstill in the Observe region that it can take over. I think this is more a Mac/Trackpad thing.

 

I've thought about using pinning to create the illusion that the Observer section is stuck but then I'm not sure what to do with the extra space that the pin creates after the user finishes the Observer section and returns to normal scroll. and there will always be a possibility that the user can freescroll so hard that they even move passed the pin 'illusion'.

 

I've played around with onEnter on my ScrollTrigger (can also be seen from my example) but even though I enable Observer at this point, it doesn't actually take effect until the inertia scroll has come to a standstill.

[Rodrigo]

Hi,

 

What you can do is ,in the onEnter and onEnterBack callbacks, set the currentIndex value to 0 or the last slide index. Also not disable the Observer instance in the onLeave and onLeaveBack callbacks and use those to force the scroll position to the start or end points of the ScrollTrigger instance to force the user to go through that section.

 

Check this example, is not the same as your setup but is a proof of concept:

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

 

Never mind the code related to the CSS setup and the slides animations, focus on the ScrollTrigger instance.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!