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

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.