---
url: "/bannerify/tutorials/animate-groups-and-layers-independently.md"
description: "Animate a parent group and its nested layers independently in Figma, then export the combined animation to HTML, MP4 or GIF with Bannerify."
---

# Animate groups and layers independently with Group Motion

> Animate a parent group and its nested layers independently in Figma, then export the combined animation to HTML, MP4 or GIF with Bannerify.

[← Back to Bannerify Video Tutorials](/bannerify/tutorials)

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

## What this video covers

Move a whole car group while rotating its wheel layers independently. This tutorial shows how to expose nested layers, enable **Keep Parent Animatable**, preview Group Motion, and export the combined animation as HTML, MP4 or GIF.

## Things you'll need

- Bannerify installed or saved in Figma.
- A top-level Figma frame containing a group with separate child layers, such as a car body and two wheels.

## Steps

1. Run Bannerify, select your banner frame, and click **Load Checked Banners**.
2. Apply an animation such as **Slide In Left** to the parent group and adjust its timing.
3. Open the nested layer settings and expand the group to expose its child layers.
4. Enable **Keep Parent Animatable**, then close the panel. The parent appears as a separate **Group Motion** row alongside the child layers.
5. Apply independent animations to the child rows, such as **Rotate 360°** on each wheel.
6. Replay the preview to check that the group moves while its child layers animate independently.
7. Choose HTML, MP4 or GIF export and save the generated ZIP file.
8. Extract the ZIP and open the HTML preview, video or GIF to check the exported animation.

## Useful links

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=B_YTLpBfROg)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-animate-groups-and-layers-independently-and-export-to-html-mp4-or-gif-using-bannerify)
- [Read: Group Motion and nested-layer settings](/bannerify/design/nested)
- [Next: Export animated banners to HTML](/bannerify/export/html)
- [Open Bannerify in the Figma Community](https://www.figma.com/community/plugin/796124491692147799)