skeleton icon indicating copy to clipboard operation
skeleton copied to clipboard

Published 20 hours ago • verified publisher icon skeletonlabs

NEXT React Animations

Open endigo9740 opened this issue 1 year ago • 2 comments
trafficstars

[!WARNING] This issue is a work in progress.

This will act as a hub to centralize this information.

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

  • [ ] https://gsap.com/ (hook)

Community Requests

The following requests have come from the community and are under consideration:

  • [ ] ...

Bugs and Issues

  • [ ] ...

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

endigo9740 avatar Jan 30 '24 04:01 endigo9740

can i work on this?

techwizard31 avatar Feb 03 '24 17:02 techwizard31

Hey @techwizard31, this isn't a single issue so much as we need to audit and explore the variety of animation libraries and options for use in multiple components. If you're familiar with animation tech in React then the most useful thing you could do is help us build a list of tech to review.

Off the top of my head I am aware of options like Framer Motion and React Spring, but I'm sure there's more.

That said, I'll probably need to be heavily involved in this audit to determine which option will be fit for Skeleton. But we can start there. Thanks!

endigo9740 avatar Feb 03 '24 18:02 endigo9740

https://github.com/skeletonlabs/skeleton/assets/1509726/624e3691-8cc3-4afb-ab62-57dbd37bbcd3

Just sharing my initial tests. I've currently created the same "Collapsable" component in three frameworks.

GSAP

Pros

  • Feels relatively modern
  • Turnkey React hook built in for proper setup/teardown
  • Fairly simple to get started
  • Framework agnostic

Cons:

  • Docs a very confusing to navigate
  • The modular structure is very confusing, the registerPlugin() feature is annoying
  • Animates aren't working as expected; trigger on load and don't run the first time

Framer Motion

Pros

  • By far the simplest to dive into and use
  • The documentation is top notch
  • Everything worked right out of the box
  • Only option to provide an <AnimatePresence> option for animating show/hide
  • Feels extremely flexible with a single module

Cons

  • React only
  • No search in the documentation
  • Requires special <motion.div> components (supports Tailwind just fine)
  • The Motion component props are a bit verbose

Anime.js

Pros

  • Framework agnostic
  • Feels the most dated; import is not ESM
  • Documentation is a bit scattered, no search
  • v4 seems to be on the horizon

Cons

  • v4 is limited to sponsors-only atm
  • No direct support for React; could result in poor performance
  • Only handle numeric animation, so height: 0 -> auto is not possible
  • Animation is probably the worse due to height pop-in

endigo9740 avatar Apr 03 '24 22:04 endigo9740

Our first React component animations are now live on the doc site. Check the updates Accordion docs! https://next.skeleton.dev/docs/components/accordion/react

endigo9740 avatar Apr 05 '24 17:04 endigo9740