SequentialAnimation

SequentialAnimation runs a set of child animations one after another

import { SequentialAnimation } from "@roku-sdk/components";

SequentialAnimation(props: IAnimationBaseProps): JSX.Element

Description

SequentialAnimation runs a set of child animations one after another.

The state field is set to "running" while any child animation is in progress. Once all children have completed, the state becomes "stopped". Child animation delay fields can be used to add gaps between sequential animations.

Playback can be controlled declaratively via the control prop or imperatively via an AnimationRef obtained through the ref prop.

Parameters

Name	Type	Description
`props`	IAnimationBaseProps

Example

<sequentialAnimation repeat={true} control="start">
    <animation duration={2} easeFunction="linear">
        <floatFieldInterpolator
            key={[0, 0.5, 1]}
            keyValue={[0.2, 1, 0.2]}
            fieldToInterp="rect1.opacity"
        />
    </animation>
    <animation duration={2} easeFunction="linear">
        <floatFieldInterpolator
            key={[0, 0.5, 1]}
            keyValue={[0.2, 1, 0.2]}
            fieldToInterp="rect2.opacity"
        />
    </animation>
</sequentialAnimation>

Description

Parameters

Example

What’s Next