ScrollTrigger Infinite Scroll + Snap-scroll

[mimei]

Hello,

 

I really appreciate using the GSAP that lets even a beginner like me make something awesome.

I have a very elementary question on customizing ScrollTrigger script.

 

I'd like to use "ScrollTrigger Infinite Scroll" script (see URL) with CSS snap-scrolling.

I modified the "ScrollTrigger.create" part (the last part) like this:

ScrollTrigger.create({
    trigger: 'section',
    onEnter: () =>  {
            createPanel(panelNum++);
            ScrollTrigger.refresh();
    },
    onLeave: () =>  {
            createPanel(panelNum++);
            ScrollTrigger.refresh();
    },

Then I noticed that it generates a new section only when I snap to/from the existing section, not  the newly created one.

I need the newly created ones to be a trigger to make an infinite snap-scrolling. 

 

I'm aware that my question is so rudimentary, but I'd be very grateful if someone could help me in making the Infinite Scroll "snappable".

See the Pen WNQmvPK by kdbkapsere (@kdbkapsere) on CodePen

[mimei]

I created the demo (which doesn't work as I expect).

See the Pen MWQGRdQ by mimei_maudet (@mimei_maudet) on CodePen

 

I'd like the newly created section to trigger events so that one can scroll infinitely.

Do you have any idea to fix the problem?

(I also noticed the creation of a section flashes the screen...)

[GreenSock]

How about this?: 

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

 

When it gets within 1/6th of the panel height from the bottom, it adds a new one. Snapping is also dynamically updated accordingly.

 

Is that what you were looking for? 

[mimei]

Hello Jack,

 

Thank you very much for your help!

Yes, that's what I have been looking for.

 

Thank you again.