gistfile1.txt

const circ = document.getElementById('circ');
const outerCirc = document.getElementById('outer-circ');

const circTwo = document.getElementById('circ-two');
const outerCircTwo = document.getElementById('outer-circ-two');

var scrollRaf = false;

var circAng = 0;
var circAngPerSec = 60 / 1000; // 60deg/sec
var circLastTime = 0;
var circAnimRaf;
var circAnimEndId;
var circDirection = 1;
var innerCircs = [circ, circTwo];
var outerCircs = [outerCirc, outerCircTwo];

function circAnimationStep(timestamp){
	// Time difference
	if(circLastTime === 0) {
		circLastTime = timestamp;
	}
	var diff = timestamp - circLastTime;
	circLastTime = timestamp;

	// Apply the time difference
	circAng += diff * circDirection * circAngPerSec; // ms * (ang / ms)


	// render
	innerCircs.forEach(function(c){
		c.style.transform = "rotate("+(circAng)+"deg) translate(-50%, -50%)";
	});
	outerCircs.forEach(function(c){
		c.style.transform = "rotate("+(-1.4* circAng)+"deg) translate(-50%, -50%)";
	});

	// loop
	circAnimRaf = requestAnimationFrame(circAnimationStep); // window.addEventListener('frame', )
}

function circStartAnimations() {
	if(!circAnimRaf){
		circAnimRaf = requestAnimationFrame(circAnimationStep);
	}

	clearTimeout(circAnimEndId);
	circAnimEndId = setTimeout(cancelCircAnimation, 100);
}

function cancelCircAnimation(){
	if(circAnimRaf){
		cancelAnimationFrame(circAnimRaf);
		circAnimRaf = false;
		circLastTime = 0;
	}
}

var circLastScrollY = 0;
document.addEventListener('scroll', function() {

	if(circLastScrollY < window.scrollY){
		circDirection = 1;
	} else {
		circDirection = -1;
	}

	circLastScrollY = window.scrollY;

	circStartAnimations();
	if(scrollRaf){
		cancelAnimationFrame(scrollRaf);
	}
	scrollRaf = requestAnimationFrame(scrollHandler);
});