1

What is the issue with using vw and vh as a unit in Javascript, i cant get it to be smooth even with requestAnimationFrame. Here is the actual working example(not so smooth). https://nikoladim123.github.io/portfo/ (no solutions yet)

function scrolerTwo() {
  var bottomOne = document.querySelector('.bottom-slider');
  var stopid;
  var x = 1;
  var swch;
  function step(){

    stopid = window.requestAnimationFrame(step);
    if (i < 30) {
      bottomTwo.style.zIndex = 1;
      bottomThree.style.zIndex = 0;
      bottomFour.style.zIndex = 0;
      x = -x;
      swch = 1;
    }
    i -= x;
    if (swch == 1 && i >= 70) {
      cancelAnimationFrame(stopid);
      swch = 0;
    }
    bottomOne.style.top = i + 'vh';
};
step();
}
Glitch Fish
  • 41
  • 1
  • 13
  • Can you post a working example. Add html and css so we can reproduce the problem – Gerardo BLANCO Feb 20 '18 at 17:43
  • yes you can look at my repo, code is too long to copy/paste here https://github.com/nikoladim123/port also i linked working page above in the question. – Glitch Fish Feb 20 '18 at 17:45
  • If you want to make smoth scrolling, consider using jQuery. – J K Feb 20 '18 at 17:45
  • 1
    @JK jQuery isn't the solution to everything. Using such a library for this is ridiculous. It can be done quickly and easily in Vanilla JS, hooked on requestAnimationFrame for smoothness. – chriskirknielsen Feb 20 '18 at 17:49
  • well im learning vanilla JS,i dont like library's and frameworks, and trying to figure out what is the issue here... – Glitch Fish Feb 20 '18 at 17:52
  • `if (swch = 1...` -> `if (swch == 1...` – James Feb 20 '18 at 18:01
  • yes @james that clears interval, check the actual link of page for the issue(and click on one of the buttons); – Glitch Fish Feb 20 '18 at 18:02
  • Pointing out a syntax error. – James Feb 20 '18 at 18:02
  • oh... thank you :D but still doesnt solve the main issue – Glitch Fish Feb 20 '18 at 18:04
  • That's why I left a comment and not an answer. – James Feb 20 '18 at 18:06
  • Is there a reason you can't just use CSS transitions? Since you're updating CSS properties, using CSS transitions will get you about the smoothest animation you can. – IceMetalPunk Nov 15 '18 at 21:02
  • Not sure if you know what every line in your code does(`x = -x`?) but I can answer the basic issue with requestAnimationFrame that you could/will experience, it executes at variable intervals. So what you need to introduce is the concept of time so you can calculate the new position based on time passed rather than on a "random" interval. A basic example: https://stackoverflow.com/a/46604409 – René Nov 15 '18 at 21:05
  • your link is 404 – velocityzen Nov 15 '18 at 21:52
  • not anymore, i had a typo – Glitch Fish Nov 15 '18 at 22:11
  • @René The link you provided will reproduce the same 'Lag' in fps if you make it's height more then 1500px for example. you can check this same problem i have on my page https://nikoladim123.github.io/portfo/ btw(x= -x reverses the value of X to opposite of it's current value 1=-1 or -1=1) – Glitch Fish Dec 02 '18 at 00:10

0 Answers0