Initial / Final Animations

We'll start with case of how to make your component appear on screen with a simple fade in animation.

A component is considered to appear on the screen when it is added to a component tree and this tree is mounted. Thus, in order to achieve the aforementioned animation you wrap this component in a CKAnimationComponent and add it to the tree, for example as a child of a flexbox component:

auto const animatedComponent = ...
auto const flexbox =
[CKFlexboxComponent
 ...
 children:{
   {[CKAnimationComponent
     newWithComponent:animatedComponent
     onInitialMount:CK::Animation::alphaFrom(0)]}
 }]

The first time this component is mounted, animatedComponent will fade in, changing its opacity from 0 to 1 (the value for the opacity in its view configuration). After that, animatedComponent will stay on screen, maintaining the value from the view configuration.

One thing to note here is that this animation won't run again until animatedComponent is removed and then re-added to the tree. Usually, this is achieved by conditionally adding a component to the tree:

auto const animatedComponent = ...
auto const flexbox =
[CKFlexboxComponent
 ...
 children:{
   {shouldShowAnimatedComponent ?
    [CKAnimationComponent
     newWithComponent:animatedComponent
     onInitialMount:CK::Animation::alphaFrom(0)] :
    nil}
 }]

Here, animatedComponent is only added to the tree if shouldShowAnimatedComponent flag is true. This flag may be a part of your component's state or may be received from its parent as a prop. As a result, animatedComponent will fade in each time the value of this flag changes from false to true and the component is re-added to the tree.

The key takeaway here is that, if you want one of your child components to animate more than once, make sure it is added to the tree conditionally.

The same principle applies to the case when you want your component to disappear with animation. For this to happen, the animated component has to be removed from the tree (or, rather, not added to the tree) as a result of a state or props update. This too, means that the component has to be added to the tree conditionally:

auto const animatedComponent = ...
auto const flexbox =
[CKFlexboxComponent
 ...
 children:{
   {shouldShowAnimatedComponent ?
    [CKAnimationComponent
     newWithComponent:animatedComponent
     onInitialMount:CK::Animation::alphaFrom(0)
     onFinalUnmount:CK::Animation::alphaTo(0)] :
    nil}
 }]

Here, in addition to the existing fade-in animation triggered when animatedComponent is added to the tree (shouldShowAnimatedComponent changes from false to true), there also would be a fade-out animation when the component is removed from the tree (shouldShowAnimatedComponent changes from true to false).

If you want a component to appear or disappear with an animation, it should be wrapped in a CKAnimationComponent and conditionally added to the tree by its parent.

This can get you pretty far already but often you want to animate a change in a component that "survives" a tree regeneration.