S
SolidJS•3w ago
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;
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
2 Replies
thetarnav
thetarnav•3w ago
Presence only works for one element it's like Transition and TransitionGroup but there is no PresenceGroup
just_me
just_meOP•3w ago
Ah, OK, I'll use transitiongroup then

Did you find this page helpful?