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

JavaScript
#1

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.

#2

Do I understand this correctly:

y = current absolute scroll position from top of screen

y_enter = scroll position where item first enters viewport, a fixed though initially unknown value

y_translate = y - y_enter, the value used for the animation

If so you just need to program that little bit of math yourself, there’s no better dom method that I’m aware of.

#3

Actually you should be able to get y_translate easily with item.getBoundingClientRect.