Daybrush (Younkue Choi) daybrush

Scene.js

🎬 Scene.js is an JavaScript & CSS timeline-based animation library.

About Scene.js /

A library that represents the timeline of Scene.js
You can control time, properties, and items.

Scene.js / Scene.js Timeline /

	const { removed, added, ordered, pureChanged,prevList, list } = result;

	const nextList = prevList.slice();

	removed.forEach(index => {
	nextList.splice(index, 1);
	});
	ordered.forEach(([from, to], i) => {
	nextList.splice(from, 1);
	nextList.splice(to, 0, list[pureChanged[i][1]]);

	scene.set({
	"[data-typing='i']": Scene.typing({ text: "I ", duration: 1}),
	"[data-typing='frontend']": {
	1: Scene.typing({ text: "'m Front-End", duration: 1}),
	},
	"[data-typing='engineer']": {
	1.5: Scene.typing({ text: "Engineer", duration: 1}),
	},
	"[data-typing='with']": {
	3.3: Scene.typing({ text: "with", duration: 0.5}),

	const text = "Make a typing effect with Scene.js.";
	const length = text.length;
	let count = 0;


	setTimeout(function loop() {
	element.innerHTML = text.substring(0, count++);

	if (count >= length) {
	return;

	.kinetic {
	transform: translate(20px, -40px);
	transform-origin: calc(50% - 20px) calc(50% + 40px);
	}