rAF example

See https://www.html5rocks.com/en/tutorials/speed/animations I'll get back to this later when I have time

by Bernie Lee

HTML

<body>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
<div class="mover">Mover</div>
</body>

JavaScript

var latestKnownScrollY = 0,
	ticking = false;

function onScroll() {
	latestKnownScrollY = window.scrollY;
	requestTick();
}

function requestTick() {
	if(!ticking) {
		requestAnimationFrame(update);
	}
	ticking = true;
  console.log('requestTick');
}

function update() {
	// reset the tick so we can
	// capture the next onScroll
	ticking = false;
	
	let currentScrollY = latestKnownScrollY;

  let scrollY             = window.scrollY,
      mover               = null,
      moverTop            = [],
      halfWindowHeight    = window.innerHeight * 0.5,
      offset              = 0;
        
	console.log('update');
	// read offset of DOM elements
	// and compare to the currentScrollY value
	// then apply some CSS classes
	// to the visible items
	let movers = document.querySelectorAll('mover');
    for(let m = 0; m < movers.length; m++) {

        mover       = movers[m];
        moverTop[m] = mover.offsetTop;

        if(scrollY > moverTop[m] - halfWindowHeight) {
            mover.className = 'mover left';
        } else {
            mover.className = 'mover';
        }

    }
}

// kick off - no longer needed! Woo.
// update();

document.addEventListener('scroll', onScroll, false);