TimelineRef

A JSX component that wraps a pointer to the engine’s CYIAbstractTimeline. You can call the imperative playback methods such as play(), stop(), and so on, with TimelineRef. However, TimelineRef is not immediately available — instead you get it from the parameter of the onLoad callback prop, and either use it immediately or cache it for later use. TimelineRef searches recursively downwards through the tree starting at its parent node for a marker which matches the name prop.

For more contextual information regarding animations and TimelineRef, see the Animations topic.

Example usage

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Composition, TimelineRef } from '@youi/react-native-youi';

export default class TestTimelineRef extends Component {
  constructor(props) {
    super(props);
  }
        
  onTimelineLoaded = timeline => timeline.play();
        
  onTimelineCompleted = () => console.log('Timeline completed');
        
  render() {
    return (
      <Composition source="PDP_Main">
        <TimelineRef
          name="In"
          onCompositionDidLoad={this.onTimelineLoaded}
          onCompleted={this.onTimelineCompleted}
        />
      </Composition>
    );
  }
}

AppRegistry.registerComponent('YiReactApp', () => TestTimelineRef);

Props

• direction: enum (‘forward’, ‘reverse’)

• loop: boolean

• onCompositionDidLoad: function

• onAborted: function

• onCompleted: function

• onPaused: function

• onPlay: function

• onStarted: function

• onCompletedForward: function

• onPausedForward: function

• onPlayForward: function

• onStartedForward: function

• onCompletedReverse: function

• onPausedReverse: function

• onPlayReverse: function

• onStartedReverse: function

Methods

• Start(): function

• Stop(): function

• Pause(): function

• Play(): function

• Abort(): function

• Seek(): function

Reference

Prop: name

AE timeline name.

Prop: direction

Set to either forward or reverse. You can change the direction that the timeline created in After Effects plays in. This prop defaults to forward.

<TimelineRef
   name='MyTimeline'
   direction='reverse'
   ...
>

Prop: loop

You can set a timeline to loop indefinitely through the loop prop, which takes a boolean value. Default is False.

<TimelineRef
   name='MyTimeline'
   loop={true}
   ...
>

Prop: onCompositionDidLoad

Called when load completes successfully. Provides a reference to this TimelineRef.

Prop: onAborted

Called when the timeline execution is aborted by the Abort() function.

Note The onAborted prop is not supported on Roku.

Prop: onCompleted

Called when playback of the timeline completes normally.

Note The onCompleted prop is not supported on Roku as the prop gets called immediately instead of when the timeline completes.

Prop: onPaused

Called whenever the timeline stops playing, including if the timeline execution completes normally.

Note The onPaused prop is not supported on Roku as the prop may get triggered unexpectedly.

Prop: onPlay

Called whenever the timeline starts playing (from any position).

Prop: onStarted

Called when playback of the timeline is initiated by one of the Start() functions.

Prop: onCompletedForward

Called when playback of the timeline completes normally. Triggered only when direction is forward.

Note The onCompletedForward prop is not supported on Roku as the prop gets called immediately instead of when the timeline completes.

Prop: onPausedForward

Called whenever the timeline stops playing, including if the timeline execution completes normally. Triggered only when direction is forward.

Note The onPausedForward prop is not supported on Roku as the prop may get triggered unexpectedly.

Prop: onPlayForward

Called whenever the timeline starts playing (from any position). Triggered only when direction is forward.

Prop: onStartedForward

Called when playback of the timeline is initiated by one of the Start() functions. Triggered only when direction is forward.

Prop: onCompletedReverse

Called when playback of the timeline completes normally. Triggered only when direction is reverse.

Note The onCompletedReverse prop is not supported on Roku as the prop gets called immediately instead of when the timeline completes.

Prop: onPausedReverse

Called whenever the timeline stops playing, including if the timeline execution completes normally. Triggered only when direction is reverse.

Note The onPausedReverse prop is not supported on Roku as the prop may get triggered unexpectedly.

Prop: onPlayReverse

Called whenever the timeline starts playing (from any position). Triggered only when direction is reverse.

Prop: onStartedReverse

Called when playback of the timeline is initiated by one of the Start() functions. Triggered only when direction is reverse.

Method: Start()

Start()

Starts playback of this timeline from the beginning (or from the end if the current direction is reverse). The onPlay and onStarted props are triggered, along with either onPlayForward and onStartedForward, or onPlayReverse and onStartedReverse (depending on the current direction). The onPaused, onPausedForward, and onPausedReverse props are not triggered.

Method: Stop()

Stop()

Stops playback of this timeline and moves to the end of the timeline (or beginning, depending on the playback direction). The onPaused and onCompleted props are triggered, along with either onPausedForward and onCompletedForward, or onPausedReverse and onCompletedReverse (depending on the current direction).

Note Stop() is not supported on Cloud Solution.

Method: Pause()

Pause()

Pauses this timeline at its current execution point. Does not reset position. The onPaused prop is triggered, along with the onPausedForward or onPausedReverse prop (depending on the current direction).

Note Pause() is not supported on Cloud Solution.

Method: Play()

Play()

Resumes playback of this timeline from the current execution point in the current direction. The onPlay prop is triggered, along with the onPlayForward or onPlayReverse prop (depending on the current direction).

Method: Abort()

Abort()

Pauses this timeline at its current execution point. Does not reset position. Unlike [Pause()](#method-Method4), this function does not trigger the OnPaused, onPausedForward, and onPausedReverse props. Instead, the onAborted prop is triggered.

Note Abort() is not supported on Cloud Solution.

Method: Seek()

seek(fPercentage)

Seeks to the given percentage within the timeline. Values of fPercentage must be between 0.0 and 1.0.

WARNING This function ignores the playback direction of the timeline.

Parameters:

Note Seek() is not supported on Cloud Solution.