daybrush

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]]);

daybrush

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}),

daybrush

Scene.kineticFrame({ left: "20px", top: "-40px" });

daybrush

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

daybrush

Scene.typing({ text: "Make a typing effect with Scene.js." });

daybrush

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;

daybrush

Scene.js

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

About Scene.js  / 

daybrush

  <div class="squares">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>  
    <div class="square"></div>  
    <div class="square"></div>  
    <div class="square"></div>
    <div class="square"></div>

daybrush

/* Scene.js */
new Scene({
  ".selector": {
    0: {
      transform: {
        tranlsate: "0px",
      },
    },
    1: {
      transform: {

daybrush

Scene.js React Timeline

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

Scene.js  /  Scene.js Timeline  /