Animation

Animation display a container that can animate between CSS properties.

Import

import { Animation } from "@prismane/core";

Usage

By default, Animation uses the fade animation.

function Demo() {
  const [animated, setAnimated] = useState(true);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setAnimated(!animated)}>Toggle Properties</Button>
      <Animation w={fr(30)} h={fr(30)} bg="primary" animated={animated} />
    </Flex>
  );
}

Animation Variants

By default, Animation exports these animations:

- fade
- scale
- scale-x
- scale-y
- skew-up
- skew-down
- rotate-left
- rotate-right
- slide-down
- slide-up
- slide-left
- slide-right

function Demo() {
  const [animated, setAnimated] = useState(true);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setAnimated(!animated)}>Toggle Properties</Button>
      <Flex gap={fr(5)} wrap="wrap">
        <Animation
          animation="fade"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Fade
          </Flex>
        </Animation>
        <Animation
          animation="scale"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Scale
          </Flex>
        </Animation>
        <Animation
          animation="scale-y"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Scale Y
          </Flex>
        </Animation>
        <Animation
          animation="scale-x"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Scale X
          </Flex>
        </Animation>
        <Animation
          animation="skew-up"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Skew Up
          </Flex>
        </Animation>
        <Animation
          animation="skew-down"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Skew Down
          </Flex>
        </Animation>
        <Animation
          animation="rotate-left"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Rotate Left
          </Flex>
        </Animation>
        <Animation
          animation="rotate-right"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Rotate Right
          </Flex>
        </Animation>
        <Animation
          animation="slide-down"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Slide Down
          </Flex>
        </Animation>
        <Animation
          animation="slide-up"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Slide Up
          </Flex>
        </Animation>
        <Animation
          animation="slide-left"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Slide Left
          </Flex>
        </Animation>
        <Animation
          animation="slide-right"
          w={fr(16)}
          h={fr(16)}
          bg="primary"
          animated={animated}
        >
          <Flex ta="center" justify="center" align="center" h="100%">
            Slide Right
          </Flex>
        </Animation>
      </Flex>
    </Flex>
  );
}

Custom animation

The animation object must contain the following properties:

- in In which the animated CSS properties are defined.
- out In which the CSS properties before animation are defined.

function Demo() {
  const [animated, setAnimated] = useState(false);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setAnimated(!animated)}>Toggle Properties</Button>
      <Animation
        w={fr(30)}
        h={fr(30)}
        bg="primary"
        animated={animated}
        animation={{
          in: {
            transform: "translateX(120px)",
            borderRadius: "50%",
          },
          out: { transform: "translateX(0px)", borderRadius: "0px" },
        }}
      />
    </Flex>
  );
}

Versatile Component

function Demo() {
  const [animated, setAnimated] = useState(true);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setAnimated(!animated)}>Toggle Properties</Button>
      <Animation
        as={Flex}
        justify="center"
        align="center"
        ta="center"
        bg="primary"
        w={fr(60)}
        h={fr(20)}
        animated={animated}
      >
        Animated Flex Component
      </Animation>
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Animation

Go BackAlert

Up NextAspectRatio