<div id="todo-list">
  <input type="text" id="todo-input" placeholder="Add a task">
  <button id="add-task">Add Task</button>
  <ul id="task-list"></ul>
</div>

#todo-list {
  width: 300px;
  margin:  auto;
}

#task-list {
  list-style-type: none;
  padding: 0;
}

.task-item {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

document.getElementById('add-task').addEventListener('click', addTask);

function addTask() {
  const taskInput = document.getElementById('todo-input');
  const taskList = document.getElementById('task-list');
  const taskText = taskInput.value.trim();

  if (taskText) {
    const taskItem = document.createElement('li');
    taskItem.classList.add('task-item');
    taskItem.textContent = taskText;

    taskItem.addEventListener('click', () => {
      anime({
        targets: taskItem,
        opacity: [1, 0],
        translateY: ['-10px', '10px'],
        duration: 500,
        easing: 'easeInOutQuad',
        complete: () => {
          taskList.removeChild(taskItem);
        },
      });
    });

    taskList.appendChild(taskItem);

    anime({
      targets: taskItem,
      opacity: [0, 1],
      translateY: ['10px', '-10px'],
      duration: 500,
      easing: 'easeInOutQuad',
    });

    taskInput.value = '';
 }
                              }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://www.npmjs.com/package/animejs