solid-auto-animate

SolidJS bindings for FormKit's AutoAnimate

Install

Install package in 5 different ways

1npm i @zmeu213/solid-auto-animate

1yarn add @zmeu213/solid-auto-animate

1pnpm add @zmeu213/solid-auto-animate

1bun add @zmeu213/solid-auto-animate

Suggest your best way to install it in deno

Usage

As directive

1import { createSignal } from 'solid-js';
2import { createAutoAnimateDirective } from '@zmeu213/solid-auto-animate';
3
4function App() {
5  const autoAnimate = createAutoAnimateDirective()
6
7  const [items, setItems] = createSignal([0, 1, 2]);
8  const add = () => setItems((current) => [...current, current.length]);
9
10  return (
11    <>
12      <ul use:autoAnimate={{ duration: 1000 }}>
13        <For each={items()}>
14          {(item) => <li>{item}</li>}
15        </For>
16      </ul>
17      <button onClick={add}>Add number</button>
18    </>
19  );
20}

As primitive

1import { createSignal } from 'solid-js';
2import { createAutoAnimate } from '@zmeu213/solid-auto-animate';
3
4function App() {
5  const [items, setItems] = createSignal([0, 1, 2]);
6  const add = () => setItems((current) => [...current, current.length])
7
8  let parent;
9
10  const [parentRef, setEnabled] = createAutoAnimate({ duration: 1000 })
11
12  return (
13    <>
14      <ul ref={parentRef}>
15        <For each={items()}>
16          {(item) => <li>{item}</li>}
17        </For>
18      </ul>
19      <button onClick={add}>Add number</button>
20    </>
21  );
22}

License

MIT