Animations

In Forge, we use various animation techniques to meet different needs. While it would be ideal to rely on a single library or method, no single solution covers all scenarios. The guiding principle is to choose the right technique for each situation. This approach keeps animations maintainable and efficient. However, attempting complex animations with overly simple methods can lead to inefficiencies and issues.

Below is an overview of the animation techniques used in Forge, listed by complexity:

1. CSS

Best for: Simple transition animations, such as hover effects (e.g., changing scale, colors, or position). A bit more complex animations like looped animations can be achieved with css animation and keyframes.

Forge includes a set of predefined CSS easing curves, supporting easing types such as sine, quad, cubic, quart, quint, expo, circ, and back. Each type is available in ease-in, ease-out, and ease-in-out variants.

Example Usage:

transition: transform 0.2s var(--ease-in-out-sine);

2. Motion (formerly Framer Motion)

Best for: Animations in React that require more flexibility than CSS can provide.

Motion simplifies complex animation tasks and animates anything that a browser can’t, like independent transforms, gradients or Three.js. Handles tasks like scroll-triggered, in-view, staggered, sequenced and enter/leave animations.

3. Anime.js

Best for: Advanced animations requiring timeline playback and precise control.

Anime.js excels at orchestrating complex animation sequences, allowing for granular control over timing and interactions.

4. Rive

Best for: State-machine-driven timeline animations.

Rive enables the creation of animations that are difficult or impossible to achieve with other techniques. These animations are typically delivered as .riv files created by designers or motion designers using the Rive software.