• Overview
  • Guides
    • Looping
    • Easing and Interpolating
    • Layers
    • Groups
    • Using TypeScript


Groups are a special kind of track region that are just a container for other regions.

Create a group by setting a region's regions property:

As you can see in the example, groups can have many of the same properties singular (or atom) track regions can have. Specifically, track region groups share these properties with track region atoms:

  • start
  • end
  • easing
  • interp
  • layer
  • loop

A group may not have these properties, however:

  • state
  • duration

Inheriting Properties

If easing or interp is set on a group, then that function will become the default easing or interp for every child of the group. Just like normal, child regions may override their default easing and interpolation functions.

Layer Namespaces

When animations are generated, React Ensemble treats groups essentially like self-contained animations. Therefore, layers are handled a bit differently than they are in a single-dimensional track.

Child regions' layers are namespaced by their parent's layer name according to this pattern: "parent-layer-name.layer-name".

For example, a region with the layer "foo" in a group will not be in the same layer as "foo" at the top level.

Relative Time

Groups have an optional property relativeTime that sets whether or not child regions' timestamps will be considered relative to the group's start time.

Consider the following group:

There are two ways to interpret the start and loop.until properties of the group's children.

First, we can consider these times absolute. Every timestamp in a group with absolute timing is considered relative to the start of the animation.

Alternatively, we can consider these times relative to the start of the group.

Further Reading

  • TrackRegionGroup API
Using TypeScript
Copyright © 2020 Joseph Cowman. All rights reserved.
React Ensemble is licensed under the MIT License.