# formidablelabs/react-animations

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/formidablelabs-react-animations).**

3,044 stars · 154 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/FormidableLabs/react-animations
- awesome-repositories: https://awesome-repositories.com/repository/formidablelabs-react-animations.md

## Topics

`animation` `react` `react-animations`

## Description

React animations is a CSS keyframe animation library and inline style animation tool designed for React applications. It supplies pre-built keyframe motion sequences that can be applied directly to inline styles and component layouts without requiring external CSS stylesheet files.

The library functions by defining reusable animation keyframes as plain immutable JavaScript objects, eliminating the need for imperative animation controllers. It dynamically generates standard CSS keyframe rules at runtime from these declarative JavaScript objects and injects them into the document on the fly, attaching compiled animation identifiers directly to component style objects.

Additional capabilities include combining distinct motion sequences into a single unified animation that executes multiple transform sets simultaneously, as well as merging separate keyframe transformation sets without causing style conflicts.

## Tags

### User Interface & Experience

- [Animation Style Presets](https://awesome-repositories.com/f/user-interface-experience/animation-style-presets.md) — Supplies pre-built keyframe motion sequences applied directly to inline component styles. ([source](https://github.com/formidablelabs/react-animations#readme))
- [Composite Animation Sequences](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/composite-animation-sequences.md) — Merges multiple distinct motion sequences into a single unified animation executing transform sets simultaneously.
- [Inline Styles](https://awesome-repositories.com/f/user-interface-experience/inline-styles.md) — Applies pre-built keyframe transitions directly inside component style objects.
- [CSS Animations](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines/css-animations.md) — Generates standard CSS keyframe rules dynamically at runtime from declarative JavaScript animation objects.
- [Component Motion Effects](https://awesome-repositories.com/f/user-interface-experience/react-component-styling/component-motion-effects.md) — Adds smooth motion and transition effects to user interface elements using JavaScript style objects in React.
- [Keyframe Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems/dynamic-style-injection/keyframe-injection.md) — Generates standard CSS keyframe definitions programmatically for use in component styles.
- [Inline Style Bindings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/inline-and-object-styling/inline-style-bindings.md) — Attaches compiled animation identifiers directly to component style objects for inline rendering.
- [Keyframe Animation Systems](https://awesome-repositories.com/f/user-interface-experience/3d-animation-libraries/keyframe-animation-systems.md) — Defines reusable animation keyframes as plain immutable JavaScript objects instead of controllers.
- [CSS Injection Mechanisms](https://awesome-repositories.com/f/user-interface-experience/dynamic-theming/css-injection-mechanisms.md) — Programmatically injects generated CSS keyframe rules into the document dynamically on the fly.