0%

JavaScript origin animation

Posted on Edited on In

JavaScript Origin animation

list animation

1
2
3
4
5
Array.from(lists).map((item, key)=>{
	setTimeout(()=>{
		item.style.transform = `translate(${}, ${})`;
	}, key * 100)
})

shuffle animation

1
2
3
4
5
6
let origin_arr = [];
let shuffle_arr = _shuffle(origin_arr);

shuffle_arr.map((item, key)=>{
	item.style.transform = `translate(${origin_arr[key].offsetLeft}, ${origin_arr[key].offsetLeft})`;
})

gressive animation

1
2
3
4
5
6
7
8
9
10
11
window.requestAnimationFrame( animation_1 )

animation_1 = () => {
	let item = document.getElementById(‘id’);
	if(item.offsetLeft > some value){
		item.style.left = some value
		return 
	}
	speed = parseFloat((target - current)/10);
	item.style.left += speed;
}