Unable to use AutoAnimate in Solid.js project following documentation example

[Andrew Boyd]

Discord user sigma is unable to get AutoAnimate working in their solid.js project following our examples in the docs.

reproduction repo here: https://github.com/awojciak/autoanimate-repro

npm install
npm run dev

Example is in ./src/components/Drawer.tsx

[Andrew Boyd]

There are two TypeScript issues in the file:

[Andrew Boyd]

Am able to work around this issue with the following. Notably, import { autoAnimate } from '@formkit/auto-animate/solid' presented as an alternative in the docs does not work — there is no named export of autoAnimate from @formkit/auto-animate/solid.

import { createSignal, For, Show } from "solid-js"
import { createAutoAnimateDirective } from "@formkit/auto-animate/solid"
import "./index.css"

export default function Drawer() {
  // Required to prevent TS from removing the directive
  const autoAnimate = createAutoAnimateDirective()

  const menuItems = ["Home", "Settings", "Logout"]
  const [isExpanded, setIsExpanded] = createSignal(true)

  return (
    <div class="parent" use:autoAnimate>
      <Show when={isExpanded()} keyed>
        <ul class="drawer">
          <For each={menuItems}>{(item) => <li class="item">{item}</li>}</For>
        </ul>
      </Show>
      <div class="content">
        <button
          class="button button--alt"
          type="button"
          onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
        >
          Toggle Drawer
        </button>
      </div>
    </div>
  )
}

[Tri Rizki Rifandani]

I'm using v1.0.0-beta.6 and yeah the example of usage in the documentation is not working both with createAutoAnimate and createAutoAnimateDirective function as of today.

The createAutoAnimate function is actually accepting AutoAnimateOptions object as it's params, not the parent ref.
It returns a tuple of ref setter and setEnabled setter function -> const [setParent, setEnabled] = createAutoAnimate().
Then, we can use the setParent setter function in ref parent element, but set it like this -> ref={(elem) => setParent(elem)}

[Martin Blasko]

I'm using v1.0.0-beta.6 and yeah the example of usage in the documentation is not working both with createAutoAnimate and createAutoAnimateDirective function as of today.

The createAutoAnimate function is actually accepting AutoAnimateOptions object as it's params, not the parent ref. It returns a tuple of ref setter and setEnabled setter function -> const [setParent, setEnabled] = createAutoAnimate(). Then, we can use the setParent setter function in ref parent element, but set it like this -> ref={(elem) => setParent(elem)}

Thanks, this helped me a lot!
Also, thanks, this rocks my socks of so far!