Animated

Every Grid element can be exported as animated entity.

Animated elements

Each grid element, such as Cols, Rows, Containers and Flexes can be exported using an animated tag. This will apply an animated wrapper from react-spring.

Example

App.tsx

import { AnimatedCol, Row, Container } from "axelra-styled-bootstrap-grid";
import { useSpring } from "react-spring";

export const App = () => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return (
    <Container>
      <Row>
        <AnimatedCol style={props}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores
          cupiditate, fugit laboriosam magnam rerum similique suscipit
          voluptatum! Autem dignissimos, et fuga modi nihil nostrum numquam
          quaerat quasi sequi veniam veritatis?
        </AnimatedCol>
      </Row>
    </Container>
  );
};