Triggering events between snaps

[daniel.mt]

Hey,

 

So a little background on this: I'm trying to create a popup with this functionality ( the scrollable container is a div not the body ). The timeline works great but due to jittery in macos / ipad I have to use pintype fixed instead of transform. All good but as I and all know due to how fixed positioning works it covers the whole scroll which makes this div unscrollable. Inside I have some cards / boxes in this case and what I'm trying to do is to make parts of the boxes be clickable with pointer events and the whole container over the fixed to have the pointer-events: none ( so the user can scroll when it's between but not when it's over some links )

 

Now the problem: In this example I'm trying somehow to find the div that is snapped and make all elements inside clickable till you scroll again. After the first scroll it should turn those into pointer events none, once is snapped turn them to pointer events auto. I tried using the update method that scrolltrigger offers and so I did with this little piece of code: 

 

var progress = Math.round(Math.round(i.progress * 100) / 100 * (length-1));

if(typeof boxes[progress] !== "undefined") {
  console.log("it's in range")
} else {
  console.log("it's not in rage")
}

 

It works great but apparently due to rounding it triggers from one element to another without triggering the else . It in essence works as it supposed to  be ( round the 0.21312 to 0, 1.3243 to 1 and so one which is the item index ) but I can't find any solution to catch the middle ground ( where the scrolling is in progress ) . 

 

In this particular case I suppose that the red box inside the white should have pointer-events: auto at init and pointer-events: none once you start scrolling. Once you snap to a point it should turn back to pointer-events: auto.

 

Thanks  .

See the Pen jOZZjpr by vesemir (@vesemir) on CodePen

[GreenSock]

Hi @vesemir. I'm having a difficult time understanding your question. Is there any chance you could simplify your demo so it doesn't have almost 300 lines of HTML/CSS/JS? I don't see anywhere in the code that you're setting pointer-events to auto or none. 

 

Are you just asking how you can tell when it's done snapping?