Description

Buffer clones, is a trick that lets you loop through an array infinitely with animation. It works by giving buffer room to let the user animate past the end, then once the animation freezes, in the background it "snaps" without animation backwards so that the user does not notice it.

Reach for when

You need to have an infinite scrolling circular loop

Pseudocode

Loop {images}
	images = [...images, ...images, ...images]
	index = images.length
	animate = true
	
	next() index++
	prev() index--
	
	useEffect
		timeout animation length
			if index < images.length
				snap = images.length
			if index > (images.length * 2) - 1
				snap = -images.length
				
			index = index+snap
			animate = false
		
	useEffect on animate
		requestAnimationFrame
			requestAnimationFrame
				animate=true
				
	div container
		div scroll
			images 
				transform: `translateX(-${index * WIDTH}px)`,
				transition: animate ? transform TIME ms ease : ""