🎬Animate

GITHUB

Anima coisas usando o Framer Motion.

Instalação

eplus io add animate

"{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

{
    "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 <- docs

Você anima os children com frames usando propriedades do framer-motion

{
    "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 <- docs

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

{
    "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 ...

{
    "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

{
    "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

"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