skrollr | alone parallax scrolling library for mobile ( Android + iOS | Animation library

Here's my attempt:

The first problem for me was that the code was executing as the input was coming in. Felt it needed some little time delay for the function to calculate. We'll do that with a setTimeout.

Second: yup, you're right. We need a math/trig-like function that will give a value close to zero for very small values, and a value close to 1 for increasing values.

Third is...well, this was more of a personal thing — wasn't sure if this was intentional, but I noticed that the spinBack function wouldn't work once you'd scrolled to the top (i.e. window.pageYOffset = 0). So, instead of scroll eventListener, I used wheel eventListener — this way, I could use the deltaY property to see by how much it changed.

Fourth, I set the speed to be a function of distance covered by time.

Finally: the CSS speed thing was counter-intuitive for me at first — for some reason, the higher the value the slower it rotated! I kept wondering what was wrong till I realised my silly error!😅

Wrapping it all up, I'll only paste the sections I changed (I've put comments where I made changes):

If you can support offset-path (not available on IE or Safari, apparently), I would strongly suggest moving as much of this as you can to CSS and SVG based animation. Here is a vanilla JS example - the only thing you actually have to calculate here is what percent along you want the animation to be, which could be based on any arbitrary scroll criteria:

There were a few issues with your css. The first is that you had multiple declarations for nav link attributes. I grouped them and adjusted them (more later) I also tidied your css to put your css in order: nav links first then nav links li then nav links li a etc, because css is read in that order. You had display:flex; and position:absolute in one css class - these conflict, and i removed the absolute positioning.

What was really throwing out your ul however, making the links non-viewable, was the translateX - translating your links by 100% was moving your links out of sight. I commented this out. As-is (now) your links display, animate on hover, and scroll-to the appropriate section when clicked. One more note: you had two semi-colons after the urls in your sections. I corrected this both in your posted code and snippet code.

Hope this helps

1. You can make an element stay fixed relative to the browser window using position: fixed.

2. To make your mask scale relative to the element it is aplied to, use: