Bug with solid-motionone and solid-styled-components

[kevinseabourne]

🐛 Bug Report: solid-motionone and solid-styled-components I've encountered a couple of issues when using solid-motionone alongside solid-styled-components. Here are the problems and a demo to demonstrate them:

The class-based 'animate' function doesn't work as expected. When animating an element's position (e.g., x: 20) on mount, hovering over that element causes it to revert to its initial position (x: 0) before the hover animation can take effect. This seems to be a problem with solid-motionone not recognizing the initial animation. Hover delay doesn't override the delay set in the transition. If a transition delay is set to 0.5 seconds and the hover delay is set to 0, the hover still has a delay of 0.5 seconds.

Demo: https://stackblitz.com/edit/solidjs-templates-ywdyd1?ctl=1&embed=1&file=src/App.tsx (https://stackblitz.com/edit/solidjs-templates-ywdyd1?ctl=1&embed=1&file=src/App.tsx)

Please try hovering in the demo to see the issues in action.

Additionally, it would be helpful if we could use the stagger property inside the transition property on an element, rather than having to use the animate function and referring to the element by its class name.

Current workaround for using solid-motionone with a solid-styled-components: const Btn = styled(Motion.button) // Your styles here ; It would be beneficial to update the documentation to include information on using solid-motionone with solid-styled-components.

As a member of the SolidJS community, I believe that addressing this bug is crucial for maintaining the high quality and usability of the solid-motionone library. I understand that you are a busy individual, but I hope that you can find the time to investigate this issue and work on a fix. The community and I would be extremely grateful for your help in resolving this problem.

If you need any further information or clarification, please don't hesitate to ask. Thank you for your help in resolving these issues!

[thetarnav]

Looks like it has nothing to do with styled-components, following code has the same bug:

const App: Component = () => {
  const [count, setCount] = createSignal(false);

  onMount(() => {
    animate(
      '.box',
      { y: count() ? 0 : 20 }, // the element has moved down 20px
      {
        delay: stagger(0.2, {
          from: count() ? 'last' : 'first',
        }),
      }
    );
  });

  const increment = () => {
    setCount(!count());
    animate(
      '.box',
      { y: count() ? 0 : 50 },
      {
        delay: stagger(0.2, {
          from: count() ? 'last' : 'first',
        }),
      }
    );
  };

  return (
    <div style={`
      min-height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(
        107deg,
        rgba(2, 108, 223, 1) 27.4%,
        rgba(0, 255, 255, 1) 92.7%
      );
      background-size: 100% 600%;
    `}>
      <style>{`
        .box {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: white;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
            rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
        }
      `}</style>
      <div style={`
        display: flex;
        gap: 20px;
        margin-bottom: 100px;
      `}>
        {Array.from({length: 4}, () => (
          <Motion
            class="box"
            initial={{ scale: 1 }}
            hover={{ scale: 1.3 }}
          />
        ))}
      </div>
      <button onClick={increment}>Click Me</button>
    </div>
  );
};

I'm not sure what is going on here yet, and if this is something that can be addressed in the solid integration. It would be useful to use just motionone to try reproducing the issue, as the solid integration is just passing the props to it, with little to no added logic.

[kevinseabourne]

yeah interesting, if I have time I might try it with react, using motion one and see if the bug persists