Nesting Animators

Animator components can be nested to create variations of animation flow transitions. By default, a child node will listen to its parent node for flow changes to transition itself.

A child node will enter the animation flow when its parent flow is entered. It will exit the animation flow when its parent flow is exiting.

By default, all direct children nodes of a parent node will enter the animation flow in parallel. This behaviour can be changed by defining an animator manager.

An animated <Menu/> and <Item/> components could be nested like:

tsx

<Menu>
  <Item>Menu Item 1</Item>
  <Item>Menu Item 2</Item>
  <Item>Menu Item 3</Item>
</Menu>

All the item nodes will transition to entering at once when the menu node is on flow entered, unless configured otherwise.

A complete example could look like this:

Menu Item 1
Menu Item 2
Menu Item 3

JSX

// MENU

const menuStyle = {
  listStyle: 'none',
  border: '1px solid cyan',
  padding: '20px 40px',
  background: 'MidnightBlue',

  // Animation initial values.
  opacity: 0,
  translateX: -20
};

const MenuComponent = ({ animator, children }) => {
  const ref = React.useRef();
  animator.setupAnimateRefs(ref);
  return <ul ref={ref} style={menuStyle}>{children}</ul>;
};

const menuAnimator = {
  duration: { enter: 200, exit: 200 },

  onAnimateEntering (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [0, 1],
      translateX: [-20, 0]
    });
  },

  onAnimateExiting (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [1, 0],
      translateX: [0, 20]
    });
  }
};

const Menu = withAnimator(menuAnimator)(MenuComponent);

// ITEM

const itemStyle = {
  display: 'block',
  fontSize: 20,
  color: 'cyan',

  // Animation initial values.
  opacity: 0,
  translateY: -10
};

const ItemComponent = ({ animator, children }) => {
  const ref = React.useRef();
  animator.setupAnimateRefs(ref);
  return <li ref={ref} style={itemStyle}>{children}</li>;
};

const itemAnimator = {
  duration: { enter: 200, exit: 200 },

  onAnimateEntering (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [0, 1],
      translateY: [-10, 0]
    });
  },

  onAnimateExiting (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [1, 0]
    });
  }
};

const Item = withAnimator(itemAnimator)(ItemComponent);

// APP

function App () {
  const [activate, setActivate] = React.useState(true);
  const timeout = React.useRef();

  React.useEffect(() => {
    timeout.current = setTimeout(() => setActivate(!activate), 2000);
    return () => clearTimeout(timeout.current);
  }, [activate]);

  return (
    <Menu animator={{ activate }}>
      <Item>Menu Item 1</Item>
      <Item>Menu Item 2</Item>
      <Item>Menu Item 3</Item>
    </Menu>
  );
}

render(<App />);

// MENU
const menuStyle = {
  listStyle: 'none',
  border: '1px solid cyan',
  padding: '20px 40px',
  background: 'MidnightBlue',
  // Animation initial values.
  opacity: 0,
  translateX: -20
};
const MenuComponent = ({ animator, children }) => {
  const ref = React.useRef();
  animator.setupAnimateRefs(ref);
  return <ul ref={ref} style={menuStyle}>{children}</ul>;
};
const menuAnimator = {
  duration: { enter: 200, exit: 200 },
  onAnimateEntering (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [0, 1],
      translateX: [-20, 0]
    });
  },
  onAnimateExiting (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [1, 0],
      translateX: [0, 20]
    });
  }
};
const Menu = withAnimator(menuAnimator)(MenuComponent);
// ITEM
const itemStyle = {
  display: 'block',
  fontSize: 20,
  color: 'cyan',
  // Animation initial values.
  opacity: 0,
  translateY: -10
};
const ItemComponent = ({ animator, children }) => {
  const ref = React.useRef();
  animator.setupAnimateRefs(ref);
  return <li ref={ref} style={itemStyle}>{children}</li>;
};
const itemAnimator = {
  duration: { enter: 200, exit: 200 },
  onAnimateEntering (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [0, 1],
      translateY: [-10, 0]
    });
  },
  onAnimateExiting (animator, ref) {
    anime({
      targets: ref.current,
      duration: animator.duration.enter,
      easing: 'linear',
      opacity: [1, 0]
    });
  }
};
const Item = withAnimator(itemAnimator)(ItemComponent);
// APP
function App () {
  const [activate, setActivate] = React.useState(true);
  const timeout = React.useRef();
  React.useEffect(() => {
    timeout.current = setTimeout(() => setActivate(!activate), 2000);
    return () => clearTimeout(timeout.current);
  }, [activate]);
  return (
    <Menu animator={{ activate }}>
      <Item>Menu Item 1</Item>
      <Item>Menu Item 2</Item>
      <Item>Menu Item 3</Item>
    </Menu>
  );
}
render(<App />);

The menu component animations run first. When they are completed, the menu items run.

Since the menu component is not configured to have a manager, its children items are transitioned in parallel. This can be configured. See animator managers.