Solid MotionOne, how to animate presence in list (using For)

I'm trying to animate additions/removals of a list, but am running into problems.

I have this code:

import { type Component, For } from "solid-js";
import { Motion, Presence } from "solid-motionone";

const Test: Component = () => {
  const items: string[] = ["a", "b"];
  return (
    <ul>
      <Presence>
        <For each={items}>
          {(item) => (
            <Motion>
              <li>{item}</li>
            </Motion>
          )}
        </For>
      </Presence>
    </ul>
  );
};

export default Test;

import { type Component, For } from "solid-js";
import { Motion, Presence } from "solid-motionone";

const Test: Component = () => {
  const items: string[] = ["a", "b"];
  return (
    <ul>
      <Presence>
        <For each={items}>
          {(item) => (
            <Motion>
              <li>{item}</li>
            </Motion>
          )}
        </For>
      </Presence>
    </ul>
  );
};

export default Test;

I would expect this to render two list items ('a' and 'b'), but it only renders 'a'. Why does this happen and how can I fix this?

I have created a codesandbox here: https://codesandbox.io/p/devbox/motion-one-list-help-xftq5z?file=%2Fsrc%2FTest.tsx%3A1%2C1-22%2C1

SolidJS•15mo ago•

2 replies

just_me

Solid MotionOne, how to animate presence in list (using For)

I'm trying to animate additions/removals of a list, but am running into problems.

I have this code:

import { type Component, For } from "solid-js";
import { Motion, Presence } from "solid-motionone";

const Test: Component = () => {
  const items: string[] = ["a", "b"];
  return (
    <ul>
      <Presence>
        <For each={items}>
          {(item) => (
            <Motion>
              <li>{item}</li>
            </Motion>
          )}
        </For>
      </Presence>
    </ul>
  );
};

export default Test;

import { type Component, For } from "solid-js";
import { Motion, Presence } from "solid-motionone";

const Test: Component = () => {
  const items: string[] = ["a", "b"];
  return (
    <ul>
      <Presence>
        <For each={items}>
          {(item) => (
            <Motion>
              <li>{item}</li>
            </Motion>
          )}
        </For>
      </Presence>
    </ul>
  );
};

export default Test;

Solid MotionOne, how to animate presence in list (using For)

Similar Threads

Solid MotionOne, how to animate presence in list (using For)

Similar Threads

Similar Threads

Similar Threads