Skip to content

AnimationPlayerElement

Jump to bottom
Roman Mahotskyi edited this page Nov 9, 2019 · 15 revisions

API Reference

Properties

Methods

Properties

# (readonly) element.id

Is a unique identifier of an element.

Default value: Auto generated integer
Type: number

# element.mountTime

A point in time when element should be added to the timeline

Default value: 0
Type: number

# element.unmountTime

A point in time when element should be removed from the timeline

Default value: 0
Type: number

# element.updateStartTime

A point in time when element should start to receive updates

Default value: 0
Type: number

# element.updateEndTime

A point in time when element should stop to receive updates

Default value: 0
Type: number

# element.duration

The range between element.mountTime and element.unmountTime

Default value: 0
Type: number

Methods

# element.onMount(callback)

Is a lifecycle hook that will trigger callback function when element should be mounted to the timeline

Note that callback function will not be triggered if you do not register it

Parameters

callback (required) - is a function that will be called when element should be added to the timeline

Typings

onMount(() => void): void

Example

// Create config file for AnimationPlayerElement
const config = {
  mountTime: 1000, // The moment when element should be added to the timeline
  updateStartTime: 2000,
  updateEndTime: 3000,
  unmountTime: 4000,
};

// Create AnimationPlayerElement
const element = AnimationPlayerElement(config);

// Register onMount callback and provide a callback function
element.onMount(() => {
   console.log('The element has mounted!');
});

// Start to update element
// Note: The update function receives elapsed seconds as argument in milliseconds.
element.update(500);
element.update(900);
element.update(1000); // At this point of time onMount will fire registered callback

# element.onUnmount(callback)

Is a lifecycle hook that will trigger callback function when element should be removed from the timeline

Note that callback function will not be triggered if you do not register it

Parameters

callback (required) - is a function that will be called when element should be removed from the timeline

Typings

onUnmount(() => void): void

Example

// Create config file for AnimationPlayerElement
const config = {
  mountTime: 1000,
  updateStartTime: 2000,
  updateEndTime: 3000,
  unmountTime: 4000, // The moment when element should be removed from the timeline
};

// Create AnimationPlayerElement
const element = AnimationPlayerElement(config);

// Register onUnmount callback and provide a callback function
element.onUnmount(() => {
   console.log('The element has unmounted!');
});

// Start to update element
// Note: The update function receives elapsed seconds as argument in milliseconds.
element.update(100);
element.update(2500);
element.update(4000); // At this point of time onUnmount will fire registered callback

# element.onUpdate(callback)

Is a lifecycle hook that will trigger callback function when element is within update range time.

Note that callback function will not be triggered if you do not register it

Parameters

callback (required) - is a function that will be called every time the element should receive updates (between updateStartTime and updateEndTime)

Typings

onUpdate((progress: number) => void): void

Example

// Create config file for AnimationPlayerElement
const config = {
  mountTime: 1000,
  updateStartTime: 2000, // The moment when element should start to receive updates 
  updateEndTime: 3000, //  The moment when element should stop to receive updates
  unmountTime: 4000,
};

// Create AnimationPlayerElement
const element = AnimationPlayerElement(config);

// Register onUpdate callback and provide a callback function
element.onUpdate((progress) => {
   console.log('The element has updated!', progress);
});

// Start to update element
// Note: The update function receives elapsed seconds as argument in milliseconds.
element.update(1000);

// At this point of time the element start to receive updates
element.update(2000); // trigger onUpdate callback (progress === 0)
element.update(2100); // trigger onUpdate callback (progress === 0.1)
element.update(2200); // trigger onUpdate callback (progress === 0.2)
element.update(2300); // trigger onUpdate callback (progress === 0.3)
element.update(2400); // trigger onUpdate callback (progress === 0.4)
element.update(2500); // trigger onUpdate callback (progress === 0.5)
element.update(2600); // trigger onUpdate callback (progress === 0.6)
element.update(2700); // trigger onUpdate callback (progress === 0.7)
element.update(2800); // trigger onUpdate callback (progress === 0.8)
element.update(2900); // trigger onUpdate callback (progress === 0.9)
element.update(3000); // trigger onUpdate callback (progress === 1)
// After 3000 seconds the element should stop receiving updates

element.update(4000);

# element.onBeforeUpdate(callback)

Is a lifecycle hook that will trigger callback function only once when element is before update time and after mount time. This callback will not be triggered if element has never been mounted to the timeline.

Note that this callback is used internally by AnimationPlayerElement. You can override default callback by registering your own.

Parameters

callback (required) - is a function that will be called only once when element has mounted to the timeline and should receive update before updating phase (Triggers between mountTime and updateStartTime).

Typings

onBeforeUpdate((progress: number) => void): void

Example

// Create config file for AnimationPlayerElement
const config = {
  mountTime: 1000,
  updateStartTime: 2000,
  updateEndTime: 3000,
  unmountTime: 4000,
};

// Create AnimationPlayerElement
const element = AnimationPlayerElement(config);

// Override default onBeforeUpdate callback by providing our own
element.onBeforeUpdate((progress) => {
   console.log('The onBeforeUpdate has triggered!', progress);
});

// Start to update element
// Note: The update function receives elapsed seconds as argument in milliseconds.
element.update(1000);
element.update(1200); // onBeforeUpdate callback has been triggered
element.update(1300);
element.update(1400);

# element.onAfterUpdate(callback)

Is a lifecycle hook that will trigger callback function only once when element is after update time and before unmount time. This callback will not be triggered if element has never been mounted to the timeline.

Note that this callback is used internally by AnimationPlayerElement. You can override default callback by registering your own.

Parameters

callback (required) - is a function that will be called only once when element has mounted to the timeline and should receive update after updating phase (Triggers between updateEndTime and unmountTime).

Typings

onAfterUpdate((progress: number) => void): void

Example

// Create config file for AnimationPlayerElement
const config = {
  mountTime: 1000,
  updateStartTime: 2000,
  updateEndTime: 3000,
  unmountTime: 4000,
};

// Create AnimationPlayerElement
const element = AnimationPlayerElement(config);

// Override default onBeforeUpdate callback by providing our own
element.onBeforeUpdate((progress) => {
   console.log('The onBeforeUpdate has triggered!', progress);
});

// Start to update element
// Note: The update function receives elapsed seconds as argument in milliseconds.
element.update(1000);
element.update(3200); // onAfterUpdate callback has been triggered
element.update(3300);
element.update(3400);

# element.update(elapsedTime)

Is a method that should update element

Parameters

elapsedTime (required) - is a positive number that tells how much time has passed in milliseconds.

Typings

update(elapsedTime: number): void

Example

// Create config file for AnimationPlayerElement
const config = {
  mountTime: 1000,
  updateStartTime: 2000,
  updateEndTime: 3000,
  unmountTime: 4000,
};

// Create AnimationPlayerElement
const element = AnimationPlayerElement(config);

element.update(500);
element.update(1000); // onMount callback should be called if registered
element.update(1500); // onBeforeUpdate callback should be called
element.update(2000); // onUpdate callback should be called if registered
element.update(2500); // onUpdate callback should be called if registered
element.update(3000); // onUpdate callback should be called if registered
element.update(3500); // onAfterUpdate callback should be called
element.update(4000); // onUnmount callback should be called if registered

Animation Player

API

Clone this wiki locally