https://github.com/lxsmnsyc/solid-auto-animate

SolidJS bindings for FormKit's AutoAnimate
https://github.com/lxsmnsyc/solid-auto-animate

animation solid-js

Last synced: 15 days ago
JSON representation

SolidJS bindings for FormKit's AutoAnimate

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-auto-animate
• Owner: lxsmnsyc
• License: mit
• Created: 2022-05-21T11:57:42.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-28T03:46:48.000Z (10 months ago)
• Last Synced: 2024-10-25T20:43:04.123Z (22 days ago)
• Topics: animation, solid-js
• Language: TypeScript
• Homepage:
• Size: 180 KB
• Stars: 37
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# solid-auto-animate

> SolidJS bindings for FormKit's AutoAnimate

[![NPM](https://img.shields.io/npm/v/solid-auto-animate.svg)](https://www.npmjs.com/package/solid-auto-animate) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-auto-animate/tree/main/examples/demo)

## Install

```bash

npm install --save solid-js @formkit/auto-animate solid-auto-animate

```

```bash

yarn add solid-js @formkit/auto-animate solid-auto-animate

```

```bash

pnpm add solid-js @formkit/auto-animate solid-auto-animate

```

## Usage

### As directive

```js

import { createSignal } from 'solid-js';

import { autoAnimate } from 'solid-auto-animate';

function App() {

  // Required to prevent TS from removing the directive

  autoAnimate;

  const [items, setItems] = createSignal([0, 1, 2]);

  const add = () => setItems((current) => [...current, current.length]);

  return (

    <>

      


        

          {(item) => 
{item}
}

        

      

      Add number

    >

  );

}

```


### As primitive

```js

import { createSignal } from 'solid-js';

import { useAutoAnimate } from 'solid-auto-animate';

function App() {

  const [items, setItems] = createSignal([0, 1, 2]);

  const add = () => setItems((current) => [...current, current.length])

  let parent;

  useAutoAnimate(() => parent, /* optional config */)

  return (

    <>

      


        

          {(item) => 
{item}
}

        

      

      Add number

    >

  );

}

```


## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)