Moving away from AMP

When I first built this site, I decided to use Google’s AMP to try and make it faster. I didn’t realize how limiting AMP would be to the content on my site, and so I’ve started moving away from AMP and recreating it’s features manually using Vanilla JS.

Here’s a list of the main features I had to replace:

Parallax Scrolling

The AMP FX Collection included a parallax scrolling feature I was using, so I had to make one from scratch on my site. The biggest challenge was making it look smooth, so I ended up using the will-change attribute (which worked quite well). When creating it, I also fixed some bugs I found in the AMP version.

Here’s the code I used to re-create the parallax:

let parallaxElements = document.body.querySelectorAll('[parallax]'), scrollPosition = 0;

for(let i = 0; i < parallaxElements.length; i++){

	parallaxElements[i].style.willChange = 'transform';

	let children = parallaxElements[i].querySelectorAll('*');

	for(let j = 0; j < children.length; j++){

		children[j].style.willChange = 'transform';

	}

}

document.addEventListener('scroll', function(){

	if(window.scrollY === scrollPosition){

		return;

	}

	scrollPosition = window.scrollY;

	for(let i = 0; i < parallaxElements.length; i++){

		parallaxElements[i].style.transform = 'translateY(' + scrollPosition / 2 + 'px)';

		//add addtional to transform

		if(parallaxElements[i].hasAttribute('addTransform')){

			parallaxElements[i].style.transform += ' ' + parallaxElements[i].getAttribute('addTransform');

		}

	}

});

Cookie notification based on location

I used an IP lookup service to replace AMP’s location plugin, and used localstorage to keep track of the cookie notification being accepted.