Class AnimationGroup<S, SS, S>

Any Animate components underneath an AnimationGroup will have their animations triggered in DOM order (i.e., the order they appear in your browser's HTML inspector devtool tab).

Props: AnimationGroupProps

Basic use

RoughUnderline, RoughHighlight, RoughCircledBox, and AnimatedLineDrawing implement Animate. Placing these components underneath an AnimationGroup will make them animate one by one.

In the following example, the underline for "dolor sit amet" would be animated, and then the underline for "legere dicunt." would be animated. Without AnimationGroup, both animations would happen at the same time.

import {AnimationGroup, RoughUnderline} from "@khanacademy/khannotations";

// ...

<AnimationGroup>
    Lorem ipsum{" "}
    <RoughUnderline
        animation={speedAnimation}
        roughStyle={testStyle}
    >
        dolor sit amet
    </RoughUnderline>
    , has solet qualisque ex, an nam tantas{" "}
    <RoughUnderline
        animation={speedAnimation}
        roughStyle={testStyle}
    >
        legere dicunt.
    </RoughUnderline>
</AnimationGroup>

Because AnimationGroup uses React Context, RoughUnderline doesn't need to be a direct child of AnimationGroup. For example, this would also work:

import {AnimationGroup, RoughUnderline} from "@khanacademy/khannotations";

// ...

const Dolor = () => (
    <RoughUnderline
        animation={speedAnimaiton}
        roughStyle={testStyle}
    >
        dolor sit amet
    </RoughUnderline>
);


// ...

<AnimationGroup>
    <Dolor />
    <Dolor />
</AnimationGroup>

Pausing

An AnimationGroup can be paused by setting paused={true}. When a group is paused, the group will not advance to the next animation. This could be used, for example, to not render annotations until the user has scrolled to them.

Making custom Animate components

You can add your own animated components to an AnimationGroup.

First, the component you want to add to an animated group needs to implement the Animate interface.

Then, you need to pass it an instance of an AnimationGroup. This can be done via the ConnectToAnimationGroup component:

import {ConnectToAnimationGroup} from "@khanacademy/khannotations";

// ...

const ConnectedCustomComponent = (props: Props) => (
    <ConnectToAnimationGroup>
        {group => <CustomComponent group={group} {...props} />}
    </ConnectToAnimationGroup>
);