Scenario Animation Step
A scenario defines an element's transform and color and can be used to make code more readable and reusable.
By default, the scenario will start with the element's current transform and color.
To test examples, append them to the boilerplate
// NOTE - use these scenario definitions for all examples belowp.scenarios['center'] = { position: [0, 0], scale: [1, 1], color: [1, 0, 0, 1] };p.scenarios['right'] = { position: [1, 0], scale: [2, 1], color: [0, 0, 1, 1] };p.scenarios['bottom'] = { position: [0, -0.5], scale: [0.5, 1], color: [0, 0.5, 0, 1] }; Copy
// NOTE - use these scenario definitions for all examples belowp.scenarios['center'] = { position: [0, 0], scale: [1, 1], color: [1, 0, 0, 1] };p.scenarios['right'] = { position: [1, 0], scale: [2, 1], color: [0, 0, 1, 1] };p.scenarios['bottom'] = { position: [0, -0.5], scale: [0.5, 1], color: [0, 0.5, 0, 1] };
// Using durationp.animations.new() .scenario({ target: 'right', duration: 2 }) .scenario({ target: 'bottom', duration: 2 }) .scenario({ target: 'center', duration: 2 }) .start(); Copy
// Using durationp.animations.new() .scenario({ target: 'right', duration: 2 }) .scenario({ target: 'bottom', duration: 2 }) .scenario({ target: 'center', duration: 2 }) .start();
// Using velocityp.animations.new() .scenario({ target: 'right', velocity: { position: 0.5, scale: 0.2 }, }) .scenario({ target: 'bottom', velocity: { position: 0.5 } }) .scenario({ target: 'center', velocity: { color: 0.2 } }) .start(); Copy
// Using velocityp.animations.new() .scenario({ target: 'right', velocity: { position: 0.5, scale: 0.2 }, }) .scenario({ target: 'bottom', velocity: { position: 0.5 } }) .scenario({ target: 'center', velocity: { color: 0.2 } }) .start();
// Different ways to create a stand-alone stepconst step1 = p.animations.scenario({ target: 'right', duration: 2,});const step2 = new Fig.Animation.ScenarioAnimationStep({ element: p, target: 'bottom', duration: 2,});p.animations.new() .then(step1) .then(step2) .start(); Copy
// Different ways to create a stand-alone stepconst step1 = p.animations.scenario({ target: 'right', duration: 2,});const step2 = new Fig.Animation.ScenarioAnimationStep({ element: p, target: 'bottom', duration: 2,});p.animations.new() .then(step1) .then(step2) .start();
Get remaining duration of the animation.
define this if you want remaining duration from a custom time
Scenario Animation Step
A scenario defines an element's transform and color and can be used to make code more readable and reusable.
By default, the scenario will start with the element's current transform and color.
Param: options
See
To test examples, append them to the boilerplate
Example
Example
Example
Example