NEXT Animation Solution

[endigo9740]

After testing and discussing this, we're going to opt for a framework-specific solutions for now. This will include:

• Svelte: the built in transition system
• React: introduce Framer Motion as a peer dependency

The associated PR will handle setup and delivery of this, including implementing new animations into the React Accordion component as reference.

When we introduce our next supported framework (likely Vue), we'll review the status of Anime.js v4 and consider migrating to this as a universal solution. But only if it meets our full requirements.

---

NOTE: all information below will be persisted for future reference.

---

Goal

We need to identify how we wish to handle animations across all frameworks. Currently Svelte has it's own animation system built in, which works great. But this may not be 1:1 with the solution selected for React. This leaves us with two options:

1. Universal: implement a single cross-framework compatible solution for all framework component packages.
2. Per Framework: implement a unique "best in class" solution per each framework package.

Maintainer Requests

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

Libraries to test:

• Universal (cross-framework)
  • GSAP - React hooks | Video
  • Anime.js - v4 incoming
• React-only:
  • Framer Motion
  • React Spring
  • Lottie
  • Ant Motion
• Svelte-only:
  • Svelte Animate
• Vue-only:
  • Transition and TransitionGroup

Resources

• Joy of Code - GSAP FLIP Animations

Community Requests

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

• Implement animation and transition utility classes #1630

Bugs and Issues

• Note that we will NOT be carrying over the dynamic transition system from Skeleton v2

Feedback

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

[endigo9740]

Kapture.2024-04-03.at.17.43.39.mp4

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]

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