arara arara logo
GitHub repository

Introduction

AraraJS is a unique take on animation for SolidJS that is basically asking the question:

  • What if I want to animate the signal value?

Since SolidJS rendering and reactivity are very efficient, this is an exciting uncharted territory.

🚧 Careful: This is experimental, please be aware of that. Suggestions are very welcome and appreciated, please reach out in SolidJS’ Discord Channel or write an Issue if you think its’ more suited.

Is it for you? Section titled Is it for you?

Animation libraries are either very high level (which is great when you’re following a common use case) or they are low level enough that it forces the programmer to leave the “reactive / declarative” mental model to deal with the animation’s “imperative / sequential” nature.

You can think of AraraJS as a middle ground between the two. It’s potentially more flexible than a high level solution but you won’t leave the “reactive / declarative” mental model because you are still in signals land.

Some applications that may benefit grom this approach include:

  • 🏃 Highly Reactive animations ( like reacting to mouse position )
  • 🧪 Mocking signal values
  • 🍎 Physics based & procedural animations

Emergent Behavior Section titled Emergent Behavior

Combining signals into derived signals is a remarkable DX from SolidJS, it’s simple, it’s powerful, it scales.

AraraJS’s signals can also be derived and combined in cleaver ways. A simple combination can emerge new exciting behavior which you’ll have full control of. Look at what is possible with only spring and sine wave primitives combined together (with mouse position) in this Hover Card.

Hover Me

Alternatives Section titled Alternatives

📖 Recommended reading: This article from Motion is a feature comparison of some animation libraries. It also explores their different Web API strategies and how it affect’s the user.

In case you are wondering, AraraJS is using the api requestAnimationFrame (RAF) under the hood because it operates exclusively on signals / javascript land.
A hybrid WAAPI with RAF approach is being considered for the future.

Additional thanks Section titled Additional thanks