I know this might a little hard to understand what I’m trying to do so I’ll explain to the best of my ability.
On user scroll, a function is run to detect whether an element is inside the viewport. If yes, then the element will be styled with transform: translate
based on the user scroll position.
The entire point of the “when in viewport” function is that the animation (transform styles) are not applied until the element becomes visible in the viewport so this is the issue I have encountered:
Using pageYOffset
means that the users scroll position is calculated from the top of the page, I can not “stop” it until the when in viewport
function is executed with the current method I am using:
item.style.transform = "translateX(-" + window.pageYOffset + "px)";
Does someone have a solution to getting the user scroll position from the point of when the function is run.
Here is the JSfiddle
Cheers.