MotionList

Een lijst uit data die alleen animeert wat veranderde.

WebReact NativeLijsten

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

App.jsx

import { useState } from 'react';
import { MotionList } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const ideas = [
  'Plan the launch',
  'Write release notes',
  'Record a demo',
  'Update the docs',
  'Reply to issues',
  'Tag the release',
];

export default function App({ effect = 'rise', stagger = 40, distance = 18 }) {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Review the design' },
    { id: 2, title: 'Fix the flaky test' },
    { id: 3, title: 'Ship the changelog' },
  ]);
  const [next, setNext] = useState(4);

  const add = () => {
    setTasks([{ id: next, title: ideas[next % ideas.length] }, ...tasks]);
    setNext(next + 1);
  };
  const remove = (id) => setTasks(tasks.filter((task) => task.id !== id));
  const shuffle = () => setTasks([...tasks.slice(1), tasks[0]].filter(Boolean));
  const sort = () => setTasks([...tasks].sort((a, b) => a.title.localeCompare(b.title)));

  return (
    <div className="stage">
      <div className="buttons">
        <button className="primary" onClick={add}>
          Add task
        </button>
        <button onClick={shuffle}>Move first to end</button>
        <button onClick={sort}>Sort A–Z</button>
      </div>
      <MotionList
        as="ul"
        className="tasks"
        items={tasks}
        effect={effect}
        stagger={stagger}
        distance={distance}
        renderItem={(task) => (
          <div className="task">
            <span>{task.title}</span>
            <button onClick={() => remove(task.id)}>Done</button>
          </div>
        )}
      />
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  max-width: 520px;
  min-height: 360px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons .primary {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

.tasks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.task button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font:
    650 13px system-ui,
    sans-serif;
  cursor: pointer;
}

Kortste gebruik

Todos.jsx

<MotionList as="ul" items={todos} renderItem={(todo) => <TodoRow todo={todo} />} />;

Wat het voor je regelt

Nieuwe items komen binnen met een begrensde cascade terwijl onaangeroerde items stil blijven staan.
Verwijderde items verlaten de flow en animeren weg waar ze stonden, terwijl de rest opschuift om het gat te dichten.
Herordende items glijden naar hun nieuwe plek.
Bewegingen die door een andere wijziging worden onderbroken, behouden hun snelheid.
present={false} animeert elk item weg, en playKey speelt het binnenkomen opnieuw af.

Gebruik het voor

Een takenlijst.
Gefilterde zoekresultaten.
Een winkelwagen.

Props

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`	`—`verplicht	Je data-array.
`getKey`	`(item) => string \| number`	`item.id`	Geeft een unieke, stabiele key voor een item terug. Standaard `item.id`, of het item zelf bij strings en getallen.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Tekent een item.
`as`	`element`	`'div'`	Het element dat wordt gerenderd.
`itemAs`	`element`	`'li' \| 'div'`	Het element voor elk item.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hoe items binnenkomen en vertrekken.
`distance`	`number`	`16`	Afstand van `rise` en `slide` in pixels.
`stagger`	`number`	`40`	Milliseconden tussen binnenkomende items.
`order`	`'forward' \| 'reverse'`	`'forward'`	Richting van de cascade.
`present`	`boolean`	`true`	`false` animeert elk item weg en behoudt de layout; `true` brengt ze terug.
`initial`	`boolean`	`true`	Speel het binnenkomen af als de lijst mount.
`playKey`	`string \| number`		Wijzigen speelt het binnenkomen opnieuw af.
`transition`	`Transition`	`spring`	Overgang voor binnenkomende en vertrekkende items.
`layoutTransition`	`Transition`	`spring`	Overgang voor items die naar een nieuwe plek glijden.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Elk item krijgt een wrapper-element (li binnen ul of ol, anders div; itemAs verandert dat) met stijl via itemClassName.

Keys moeten uniek zijn. Wikkel de lijst in MotionHeight om ook de totale hoogte te animeren.