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>
  )
}

[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)}

[MartinBspheroid]

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!