---
url: "/pt/bannerify/design/nested.md"
description: "Mova, redimensione, gire ou aplique fade em um grupo pai enquanto as camadas filhas aninhadas reproduzem as próprias animações do Bannerify."
---

# Animar grupos e camadas aninhadas de forma independente

> Mova, redimensione, gire ou aplique fade em um grupo pai enquanto as camadas filhas aninhadas reproduzem as próprias animações do Bannerify.

[Video](/assets/videos/bannerify/design/nested-layers.mp4)

### Vídeo tutorial: anime grupos e camadas de forma independente com o Group Motion

[Embedded media](https://www.youtube-nocookie.com/embed/B_YTLpBfROg)

[Siga o tutorial passo a passo](/bannerify/tutorials/animate-groups-and-layers-independently).

O Bannerify consegue animar um grupo pai e as camadas dentro dele ao mesmo tempo. Por exemplo, você pode mover um carro agrupado pelo banner enquanto gira as camadas das rodas de forma independente.

## O que você vai precisar {#things-you-ll-need}

- Um frame de nível superior do Figma com o design do banner.
- Uma camada pai com uma ou mais camadas filhas dentro dela.
- Nomes diferentes para cada camada filha que você quer animar individualmente.

## Passos {#steps}

1. No Figma, coloque as camadas relacionadas dentro de um único grupo pai. Para animar um carro, você pode criar um grupo `Car` com `Body`, `Wheel Left` e `Wheel Right`.
2. Peça ao Bannerify para expandir o grupo pai usando um destes métodos:
   - Adicione `[expand]` ao nome da camada pai, como `Car [expand]`.
   - Abra o Bannerify, clique no ícone **List** no topo da linha do tempo do banner e depois clique na **Arrow** ao lado da camada pai.
3. No painel de camadas aninhadas, ative **Keep Parent Animatable** ao lado do pai expandido. Essa opção vem desativada por padrão, para que as configurações de camadas aninhadas existentes mantenham o comportamento anterior, em que só as filhas são animadas.
4. Feche o painel de camadas aninhadas. O Bannerify atualiza o banner e adiciona à linha do tempo as camadas filhas expostas.
5. Confira se a linha do tempo contém as camadas filhas e uma linha separada para o pai, identificada como **(Group Motion)**. Neste exemplo, a linha do pai aparece como `Car [expand] (Group Motion)`.
6. Aplique o movimento compartilhado na linha **Group Motion**. Por exemplo, aplique **Slide In Left** para fazer o carro inteiro entrar no banner.
7. Aplique animações independentes às linhas das filhas. Por exemplo, aplique **Rotate 360°** a cada roda.
8. Clique em **Play All Banners** ou use o controle de navegação da linha do tempo para visualizar o resultado combinado.
9. Exporte o banner normalmente. As animações do pai e das filhas são combinadas nas exportações HTML, GIF, MP4, WebM e nas outras exportações de mídia baseadas em canvas.

## Group Motion {#group-motion}

[Video](/assets/videos/bannerify/animation/nested-parent-animation.mp4)

Com **Keep Parent Animatable** ativado, o Bannerify marca o pai como **Animatable** e adiciona uma linha **Group Motion** separada à linha do tempo. A linha do pai funciona como um invólucro de movimento em volta das camadas filhas expostas. Translação, escala, rotação, opacidade e recorte aplicados ao pai são combinados com as animações aplicadas a cada filha.

Se **Keep Parent Animatable** estiver desativado, as camadas filhas continuam expandidas e animáveis, mas o Bannerify não adiciona a linha **Group Motion** do pai. O Bannerify lembra essa opção para cada camada pai.

> **Tip:** Use nomes claros e consistentes para as camadas filhas quando a mesma estrutura aparecer em vários tamanhos de banner. Assim, você pode usar o **Quick Select Layers** para selecionar as camadas correspondentes e aplicar as animações delas em massa.

## Mover uma foto dentro de uma máscara arredondada {#moving-a-photo-inside-a-rounded-mask}

Para fazer um grupo com máscara deslizar para dentro do banner enquanto a foto dele se move de forma independente:

1. No Figma, use um único retângulo como máscara do grupo inteiro. Mantenha a máscara abaixo de toda a arte que ela recorta. Você pode usar raios diferentes em cada canto.
2. Expanda o grupo da máscara no Bannerify e ative **Keep Parent Animatable**.
3. Aplique **Slide In Left** à linha **Group Motion** do grupo.
4. Aplique uma animação separada, como **Zoom Pan Right**, à linha da foto. Aumente a duração dela para uma panorâmica mais lenta.
5. Visualize e exporte o banner. A foto se move dentro do contorno arredondado enquanto a animação do pai move o grupo inteiro.

Isso funciona com máscaras retangulares sem rotação e com cantos padrão, usando uma máscara **Alpha** opaca ou uma máscara **Vector**. A máscara em si não vira uma linha de animação. Mantenha recolhidos os grupos com várias máscaras, máscaras parciais entre camadas irmãs, máscaras suaves ou de luminância, suavização de cantos, contornos ou efeitos, para preservar a aparência deles como uma única imagem.

## Usar Sections do Figma {#using-figma-sections}

A mesma configuração funciona quando **Use Figma sections as multi-scene banners** está ativado. Cada linha exposta inclui o número da cena, e um pai com a opção ativada continua disponível como uma linha **Group Motion** separada dentro daquela cena.

## Camadas de slot do Figma {#figma-slot-layers}

O Bannerify também é compatível com [camadas de slot](https://help.figma.com/hc/en-us/articles/38231200344599-Use-slots-to-build-flexible-components-in-Figma) do Figma dentro dos frames de banner. Os contêineres de slot são tratados como grupos de camadas aninhadas e já começam expandidos na primeira vez que o Bannerify os carrega, deixando as camadas filhas disponíveis na linha do tempo imediatamente.

Se você recolher manualmente uma camada de slot, o Bannerify lembra essa preferência quando o banner é atualizado.

## Se o grupo ou as camadas filhas não aparecerem {#if-the-group-or-child-layers-are-missing}

- Verifique se o banner é um frame de nível superior do Figma ou se está dentro de uma Section carregada no modo de várias cenas.
- Confirme que o pai tem camadas filhas e está expandido no Bannerify.
- Se as camadas filhas aparecerem sem a linha **Group Motion** do pai, abra o painel de camadas aninhadas e ative **Keep Parent Animatable** ao lado do pai.
- Se você renomeou o pai com `[expand]` depois de carregar o banner, clique em **Refresh Banner Layers**.
- Mantenha as camadas filhas visíveis no Figma e verifique se elas estão dentro do pai expandido.

## Links úteis {#useful-links}

- [Animar as camadas do banner](/pt/bannerify/animation/animating-banners)
- [Selecionar camadas correspondentes com o Quick Select](/pt/bannerify/animation/quick-select-layers)
- [Criar banners com várias cenas usando Sections do Figma](/pt/bannerify/design/scenes)
- [Exportar banners animados para HTML](/pt/bannerify/export/html)
- [Exportar banners para vídeo](/pt/bannerify/export/video)