SolidJS Integration For Auto Animate

[ardeora]

Greetings!

Thanks for this amazing library!

I have created a SolidJ integration for autoAnimate that will let us easily use autoAnimate with SolidJS.

Methods of use

This integration provides two methods for users to implement autoAnimate in their SolidJS app.

Primitive

Developers can use the createAutoAnimate primitive function that returns a tuple of the parentRef setter function and the setEnabled function similar to the autoAnimate react hook. The behavior is exactly same as the react hook. Here is an example of usage.

import { createAutoAnimate } from '@formkit/auto-animate/solid'

const App: Component = () => {
  const [parentRef, setEnabled] = createAutoAnimate({ duration: 1000 })

  return (
    <div>
      <ul ref={parentRef} > </ul>
      <button onClick={() => setEnabled(false)} >Stop Animation</button>
    </div>
  )
}

Directive

Solid JS also allows placing directives in JSX similar to the Svelte implementation of auto-animate

import { createAutoAnimateDirective } from '@formkit/auto-animate/solid'

const App: Component = () => {
  const autoAnimate = createAutoAnimateDirective()

  return (
    <div>
      <ul use:autoAnimate > </ul>
      <ul use:autoAnimate={{
          duration: 1000
        }} 
      > </ul>
    </div>
  )
}

I have also created a live example in Stackblitz with both methods in action over here

https://stackblitz.com/edit/vitejs-vite-8kuq8f?file=src%2FautoAnimateSolid.ts

https://user-images.githubusercontent.com/45807386/187337794-6b1bc73f-4a25-4d45-906d-c9500b4ee3aa.mov

Please let me know if you would like me to make any changes and I will try to incorporate them ASAP.

Hope you have a great week!

Thanks, Aryan

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
auto-animate	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 2:52AM (UTC)

[justin-schroeder]

This looks great! I'd love it if you were able to add a documentation section and hero example (at the top of the page). I don't "speak" solid myself, so your contribution would be valuable.

If you do tackle adding an example, one thing to note is we are looking for unique examples — in other words — not the same examples that already exist on the page, but some new concept to help people see a variety of ways to use it.

[ardeora]

Awesome! Yeah I would love to add documentation. I'll try to think of some unique examples. Do you have any spefic animation use case in mind? If there is already something you would like to see auto-animate do then I caan implement that :D Also, thanks for the quick response!

[fenilli]

I have some ideas for examples that do not have in the documentation yet, you could take inspiration on those.

1. Youtube style menu with subitems.
2. Modal opening and closing from x place on the screen.
3. Progress bar ( radial or normal )

[ardeora]

I have some ideas for examples that do not have in the documentation yet, you could take inspiration on those.

1. Youtube style menu with subitems.

2. Modal opening and closing from x place on the screen.

3. Progress bar ( radial or normal )

Yeah these are all interesting ideas! For the first YouTube menu example, what functionality would you like to see? Could you share a screen recording of the animation effect you are thinking of?

[fenilli]

Just opening as a drawer, I do not have any screen recorder right now, but opening youtube you can see the hamburguer menu icon, just clicking it would give the example its quite a simple animation of slide in and slide out from the left.

[kirill-dev-pro]

Hey @justin-schroeder please dont forget about this PR

[justin-schroeder]

Haven't forgotten — waiting for someone to write docs for it (with unique examples)

[ardeora]

Sorry about this. Got busy with other projects. I will add examples sometime later this week 😄 Apologies for the delay here

[justin-schroeder]

@ardeora any further progress on this?

[ardeora]

Closing this in favor of https://github.com/formkit/auto-animate/pull/117