> For the complete documentation index, see [llms.txt](https://e-plus-agency.gitbook.io/plus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/animate.md).

# Animate

### [GITHUB](https://github.com/agencia-e-plus/animate)

Anima coisas usando o Framer Motion.

## Instalação

```
eplus io add animate
```

```json
"{vendor}.animate": "0.x"
```

## Blocos

| Nome           | Descrição                                                  |
| -------------- | ---------------------------------------------------------- |
| animate        | Anima coisas                                               |
| console-scroll | Mostra a posição do scroll da página no console de 0 a 100 |

## Como usar

```json
{
    "animate": {
        "children": [
            "...",  // Child 0
            "...",  // Child 1
            "...",  // Child 2
        ],
        "frames": [
            {...}   // Anima o child 0
            {...}   // Anima o child 1
            {...}   // Anima o child 2
        ],
        "transition": [
            {...}   // Transição para o child 0
            {...}   // Transição para o child 1
            {...}   // Transição para o child 2
        ],
        "onClick": [
            {...}   // Quando clicar no child 0, anima os childs em animateChild
            {...}   // Quando clicar no child 1, anima os childs em animateChild
            {...}   // Quando clicar no child 2, anima os childs em animateChild
        ],
        "onScroll": [
            {...}   // Quando rolar a página, anima o child 0
            {...}   // Quando rolar a página, anima o child 1
            {...}   // Quando rolar a página, anima o child 2
        ]
    }
}

```

## [Frames](https://www.framer.com/motion/animation/) <- docs

Você anima os `children` com `frames` usando propriedades do [framer-motion](https://www.framer.com/motion/animation/)

```json
{
    "frames": [
        {
            "from": {
                "opacity": 0,
                "scale": 0.5
            },
            "to": {
                "opacity": 1,
                "scale": 1
            }
        }
    ]
}
```

Cada frame tem um estado inicial `from` e um estado final `to`.

## [Transição](https://www.framer.com/motion/transition/) <- docs

Pra ajustar a duração da animação você define a `transition`

```json
{
    "transition": [
        {
            "type": "linear",
            "duration": 0.6
        }
    ]
}
```

**OBS**: O `easing` por padrão é `snappy` não `linear`, a animação meio que quica.

## Animando com cliques

Ao clicar no `child`, você avança o estado da animação, `from -> to -> from ...`

```json
{
    "onClick": [
        {
            // Ao clicar no child 0, anima o child 1
            "animateChild": 1
        },
        {
            // Ao clicar no child 1, anima os childs 0, 1 e 2
            "animateChild": [0, 1, 2]
        },
        {
            // Ao clicar no child 2, anima o child 0
            "animateChild": 0          
        }
    ]
}
```

## Animado ao scroll

```json
{
    "onScroll": [
        {
            "range": [0.01, 1]  // Quando o scroll estiver entre 1% e 100% da página
        }
    ]
}
```

Quando o usuário scrolla a página, as animações do frame são iteradas/avançadas

Quando a página tiver entre 0% e 1%, a animação vai de `from -> to`

Quando o child estiver entre 1% e 100% da página, a animação vai de `to -> from`

O loop continua...

## Exemplo

```json
"animate#...": {
    "children": [
        "...",
        "...",
        "...",
    ],
    "props": {
        "transition": {
            "type": "linear",
            "duration": 0.6
        },
        "frames": [
            {
                "from": {
                    "opacity": 0
                },
                "to": {
                    "opacity": 1
                }
            }
        ],
        "onScroll": [
            {
                "range": [0.01, 1]
            }
        ]
    }
}
```

## Customização

| CSS Handles | Descrição                                                |
| ----------- | -------------------------------------------------------- |
| container   | Usado para identificar quando o elemento aparece na tela |