Animations

Built in animations

You can use some of our built-in animations listed here

Entering

• emerge
• emergeSlantFromTop
• emergeSlantFromBottom

Leaving

• dive
• diveSlant

Example

import { animations } from "@concrete-design/core";

const MyComponent = styled.div`
  animation: ${animations("emergeSlantFromTop")};
`;

emerge

emergeSlantFromTop

emergeSlantFromBottom

dive

diveSlant

Transition

Concrete comes with small utility to help having consistent animation duration and type.

import { transition } from "@concrete-design/core";

const MyComponent = styled.div`
  transition: ${transition($cssKey)};
`;

Durations

You can customize tue duration with the following keys:

• xs 30ms
• s 75ms
• m 150ms
• l 250ms

import { transition, animations } from "@concrete-design/core";

const MyComponent = styled.div`
  transition: ${transition("all", { duration: "xs" })}
  animation: ${animations("diveSlant", { duration: "l" })}
`;