kinetic-components

Kinetic components helps you animate a single React component and orchestrate animations amongst a collection of React components.

Use CSS animations or any JS animation library you like!

Examples

All examples can be found in the playground at https://erhathaway.github.io/kinetic-components/.

TL;DR

Usage is describe in the playground ^

In short, the library works by having an Animate and Animatable component. The Animate component controls the Animatable component. You can style the Animatable component and nest children under it (like additional Animate - Animatable nestings). When you change the Animates visible prop, predicate functions in the when prop are evaluated and associated animation functions are run on the nested Animatable component's DOM element.

You can control how multiple Animate - Animatable pairings animate together using animationBindings. These allow you to do things like wait on children before leaving or wait on parents before entering.

Futhermore, you can do more than just animate enter and exit states. Using the custom triggerState prop you can provide additional predicate based animations that run on all sorts of state changes!

API

Animate

| prop | required | type | description | | ---------------------- | -------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | logger | | ILogger | A Beano logger to get debugging info for this component | | visible | x | boolean | The state that controls whether to show or hide the Animatable component | | | triggerState | | object | An optional object that can be used to trigger animation runs. Shallow diffs are used to check for differences | | predicateState | | any | An optional state prop that will be passed as the first arg to predicate functions during an animation run | | when | x | Array<[Predicates or Predicate, PredicateAnimation, Options]> | The logic that has predicate - animationFn pairings. Options is an object of type {key: string}. The key is used to track if the same animation is applied twice in a row. Normally, animation libs and CSS animations would have a noop action b/c the transform is already applied. Kinetic handles this by doing a component unmount to clear the transforms then it runs the animation. If you want to avoid the unmount, don't pass in the optional key | | | children | | unmountOnHide | | true | A flag for control if the Animatable component should be unmounted from the DOM when it is no longer visible | | id | | string | The element ID. This is required if you are referencing this component in another Animate component via props enterAfterChildStart or enterAfterChildFinish | | animationBinding | | AnimationBinding | The binding that connects multiple animations together. This is supplied by a higher level Animate or Animatable component via a FACC (Function as child component) | | enterAfterChildStart | | string[] | The child ids which you want to wait for. These ids should match the ids passed to the child Animate component | | enterAfterChildFinish | | string[] | The child ids which you want to wait for. These ids should match the ids passed to the child Animate component | | enterAfterParentStart | | boolean | Whether to wait for the parent to fully start animating before animating | | enterAfterParentFinish | | boolean | Whether to wait for the parent to fully finish animating before animating |

Animatable

| prop | required | type | description | default | | ----- | -------- | -------- | ------------------------------------- | ----------- | | style | | object | React styles to pass to the component | undefined |