How to make this script animation jitter less

[Aeonix]

No jQuery!

This is script that I got from Chris Buttery website. Or at least part of it:

    function fadeOut(el){
        el.style.opacity = 1;

        (function fade() {
            if ((el.style.opacity -= .05) < 0) {
                el.style.display = "none";
            } else {
                requestAnimationFrame(fade);
            }
        })();
    }

The problem is that when I run it, it does work perfectly, but it jitters a lot. I can literally point out moments when that 5% of opacity is removed. Any ideas? It's not optimization of script, nor it's my weak computer. This script is about as clean as it gets and my laptop isn't trash either, so there must be something worth adding.

[Taywin]

There are 2 dependent events in your fading -- decreasing/increasing value of opacity and the time interval. In this case, it looks like your time interval of animation is not smooth enough. What is inside requestAnimationFrame() function? If you are using setTimeout() or setTimeinterval(), then make sure that the sleep time is low enough (100~200 milliseconds should be suffice).

[Aeonix]

What is inside requestAnimationFrame() function?

According to JavaScript specifications:

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

There are 2 dependent events in your fading -- decreasing/increasing value of opacity and the time interval.

There's only one event. Decreasing value of opacity.

[rproffitt]

I have to ask. Did you try .001 instead of .05?

[Aeonix]

I have to ask. Did you try .001 instead of .05?

I did try, but that's too slow. That's the thing, bringing it down to very low values works, but not because it's somehow more optimized but probably because human eye cannot notice that jitter. jQuery's animate on the other hand has not a single problem animating in .5, so I don't know what the issue is.

[rproffitt]

I don't think I can cover what is something we covered in a graphics programming session but I'll try.

Example. If you use a simple for loop and change the image size or location you are at the mercy of task scheduling in the browser and OS.

This is why you use a timer to fire off the changes. That was at each discrete time interval you get so much change.

So, you say want smooth, then you set the position, opacity based on time not on random processing speed of the browser.

[ryantroop]

I know this was marked fixed already, but if you have the option to skip JS timing all together, you might as well just use CSS and let the hardware / browser do the heavy lifting for you. The transition for opacity is pretty good, and the timing is very easily customizable... You can even attach event handlers to fire when the transition is complete to remove the element (as per your display none, or you can remove it from the DOM completely).

Just an alternative..

Ryan