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 "@habx/ui-core";
const MyComponent = styled.div`
animation: ${animations("emergeSlantFromTop")};
`;
Transition
Concrete comes with small utility to help having consistent animation duration and type.
import { transition } from "@habx/ui-core";
const MyComponent = styled.div`
transition: ${transition($cssKey)};
`;
Durations
You can customize tue duration with the following keys:
xs
30mss
75msm
150msl
250ms
import { transition, animations } from "@habx/ui-core";
const MyComponent = styled.div`
transition: ${transition("all", { duration: "xs" })}
animation: ${animations("diveSlant", { duration: "l" })}
`;