Transition
Transition is a simple animation library. It is based on requestAnimationFrame. Its only job is to calculate a delta based on a duration and an equation. It is kept simple to be able to animate any number of things, with any interpolation logic.
Properties
An animation can be idle
, active
, or paused
.
active
means the animation is started. The animation can be either paused or stopped.paused
means the animation is in a paused state. The animation can be resumed.idle
means the animation is neither paused or active. It can be started.
Usage
var Transition = ;var equations = ; var animation = 1000 equationssineIn { console;}; // an animation should be startedanimationstart; // is the animation running?console; // true // an animation can be paused and resumed.animation; animation; // an animation can be stoppedanimation; // you can also check if it's idle.console;
Example with Transform3d
var Transform3d = ;var Transition = ; var equations = ; var transform1 = ;var transform2 = ; transform1;transform2; var interpolation = transform1; var animation = 1000 equationscubic { elementstyleWebkitTransform = interpolation;}; animationstart;