Arwes animation system example.

arwesAnimationSystemExample.tsx

/** @jsxImportSource @emotion/react */
import { jsx } from '@emotion/react';
import { ReactElement, useState, useEffect } from 'react';

import { Animator, AnimatorGeneralProvider } from '@arwes/animator';
import { Animated } from '@arwes/animated';

const AnimatedItem = (props: { color: string }): ReactElement => {
  return (
    <Animated
      css={{
        display: 'block',
        width: 100,
        height: 100,
        background: props.color
      }}
      animated={{
        initialStyle: { opacity: 0, x: 0 },
        transitions: {
          entering: { opacity: 1, x: 100 },
          exiting: { opacity: 0, x: 0 }
        }
      }}
    />
  );
};

const PageTest = (): ReactElement => {
  const [active, setActive] = useState(false);

  useEffect(() => {
    setTimeout(() => setActive(true), 1000);
    setTimeout(() => setActive(false), 4000);
  }, []);

  return (
    <div css={{ margin: 20 }}>
      <h1>Animation Test</h1>
      <AnimatorGeneralProvider
        duration={{ enter: 0.4, exit: 0.4, stagger: 0.04 }}
      >
        <Animator
          root
          active={active}
          manager='stagger'
        >
          <AnimatedItem color='yellow' />
          <div style={{ marginLeft: 50 }}>
            <Animator>
              <AnimatedItem color='cyan' />
            </Animator>
            <Animator manager='stagger'>
              <AnimatedItem color='cyan' />
              <div style={{ marginLeft: 50 }}>
                <Animator>
                  <AnimatedItem color='green' />
                </Animator>
                <Animator>
                  <AnimatedItem color='green' />
                </Animator>
                <Animator>
                  <AnimatedItem color='green' />
                </Animator>
              </div>
            </Animator>
            <Animator>
              <AnimatedItem color='cyan' />
            </Animator>
          </div>
        </Animator>
      </AnimatorGeneralProvider>
    </div>
  );
};

export default PageTest;

Preview

Screen.Recording.2022-03-09.at.18.20.35.mov