# Animated

## 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

{% code title="App.tsx" %}

```javascript
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>
  );
};
```

{% endcode %}