Animate groups and nested layers independently

Move, scale, rotate, or fade a parent group while its nested child layers play their own Bannerify animations.

Bannerify can animate a parent group and the layers inside it at the same time. For example, you can move a grouped car across the banner while independently rotating its wheel layers.

Things you'll need ​

  • A top-level Figma frame containing your banner design.
  • A parent layer with one or more child layers inside it.
  • Separate names for any child layers you want to animate individually.

Steps ​

  1. In Figma, place the related layers inside one parent group. For a car animation, you might create a Car group containing Body, Wheel Left, and Wheel Right.
  2. Tell Bannerify to expand the parent group using either of these methods:
    • Add [expand] to the parent layer name, such as Car [expand].
    • Open Bannerify, click the List icon at the top of the banner timeline, then click the Arrow beside the parent layer.
  3. In the nested-layer panel, enable Keep Parent Animatable beside the expanded parent. This option is off by default, so existing nested-layer setups keep their previous child-only behaviour.
  4. Close the nested-layer panel. Bannerify will refresh the banner and add the exposed child layers to the timeline.
  5. Confirm that the timeline contains the child layers and a separate parent row labelled (Group Motion). In this example, the parent row appears as Car [expand] (Group Motion).
  6. Apply the shared movement to the Group Motion row. For example, apply Slide In Left to move the complete car into the banner.
  7. Apply independent animations to the child rows. For example, apply Rotate 360° to each wheel.
  8. Click Play All Banners or use the timeline scrubber to preview the combined result.
  9. Export the banner normally. The parent and child animations are composed in HTML, GIF, MP4, WebM, and other canvas-based media exports.

Group Motion ​

When Keep Parent Animatable is enabled, Bannerify marks the parent as Animatable and adds a separate Group Motion row to the timeline. The parent row acts as a motion wrapper around its exposed child layers. Translation, scale, rotation, opacity, and clipping applied to the parent are combined with the animations applied to each child.

If Keep Parent Animatable is turned off, the child layers remain expanded and animatable, but Bannerify does not add the parent Group Motion row. Bannerify remembers this option for each parent layer.

Use clear, consistent child-layer names when the same structure appears across several banner sizes. You can then use Quick Select Layers to select matching layers and apply their animations in bulk.

Using Figma Sections ​

The same setup works when Use Figma sections as multi-scene banners is enabled. Each exposed row includes its scene number, while an opted-in parent remains available as a separate Group Motion row inside that scene.

Figma Slot layers ​

Bannerify also supports Figma slot layers inside banner frames. Slot containers are treated like nested layer groups and start expanded the first time Bannerify loads them, making their child layers immediately available in the timeline.

If you manually collapse a Slot layer, Bannerify remembers that preference when the banner is refreshed.

If the group or child layers are missing ​

  • Make sure the banner is a top-level Figma frame or is inside a Section loaded in multi-scene mode.
  • Confirm the parent has child layers and is expanded in Bannerify.
  • If the child layers appear without the parent Group Motion row, open the nested-layer panel and enable Keep Parent Animatable beside the parent.
  • If you renamed the parent with [expand] after loading the banner, click Refresh Banner Layers.
  • Keep the child layers visible in Figma and ensure they are inside the expanded parent.