Alternative to pageYOffset (animate on scroll position from current point)

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.