Trigger Animation Step
A trigger step executes a custom function
A delay will delay the triggering of the custom function while duration will pad time at the end of the trigger before the animation step finishes.
delay
duration
To test examples, append them to the boilerplate
// Simple triggerp.animations.new() .position({ target: [1, 0], duration: 2 }) .trigger(() => { console.log('arrived at (1, 0)') }) .position({ target: [0, 0], duration: 2 }) .trigger(() => { console.log('arrived at (0, 0)') }) .start(); Copy
// Simple triggerp.animations.new() .position({ target: [1, 0], duration: 2 }) .trigger(() => { console.log('arrived at (1, 0)') }) .position({ target: [0, 0], duration: 2 }) .trigger(() => { console.log('arrived at (0, 0)') }) .start();
// Trigger with delay, duration and payloadconst printPosition = (pos) => { console.log(`arrived at ${pos}`);};p.animations.new() .position({ target: [1, 0], duration: 2 }) .trigger({ delay: 1, callback: printPosition, payload: '(1, 0)', duration: 1, }) .position({ target: [0, 0], duration: 2 }) .trigger({ callback: printPosition, payload: '(0, 0)' }) .start(); Copy
// Trigger with delay, duration and payloadconst printPosition = (pos) => { console.log(`arrived at ${pos}`);};p.animations.new() .position({ target: [1, 0], duration: 2 }) .trigger({ delay: 1, callback: printPosition, payload: '(1, 0)', duration: 1, }) .position({ target: [0, 0], duration: 2 }) .trigger({ callback: printPosition, payload: '(0, 0)' }) .start();
// Different ways to create a stand-alone stepconst step1 = p.animations.trigger({ callback: () => { console.log('arrived at (1, 0)') },});const step2 = new Fig.Animation.TriggerAnimationStep({ callback: () => { console.log('arrived at (0, 0)') },});p.animations.new() .position({ target: [1, 0], duration: 2 }) .then(step1) .position({ target: [0, 0], duration: 2 }) .then(step2) .start(); Copy
// Different ways to create a stand-alone stepconst step1 = p.animations.trigger({ callback: () => { console.log('arrived at (1, 0)') },});const step2 = new Fig.Animation.TriggerAnimationStep({ callback: () => { console.log('arrived at (0, 0)') },});p.animations.new() .position({ target: [1, 0], duration: 2 }) .then(step1) .position({ target: [0, 0], duration: 2 }) .then(step2) .start();
Get remaining duration of the animation.
define this if you want remaining duration from a custom time
Start animation
Trigger Animation Step
A trigger step executes a custom function
A
delaywill delay the triggering of the custom function whiledurationwill pad time at the end of the trigger before the animation step finishes.Param: options
See
To test examples, append them to the boilerplate
Example
Example
Example