Timeplate

A modern animation timeline built for performance and simplify some complex usage for animator needs.

Dependent on EventPine as Event Manager.

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Example

Some feature still being improved and undocumented yet. Being used by StefansArya for some project. If you're interested with this library please reach me on GitHub to update the documentation.

Timeline for selected elements

Any animateable CSS can used for keyframe, including filter (blur, hueRotate, etc).

var plate = Timeplate.for(/* El Selector */ '.Apple', /* Keyframes */[
  {offset:0  , translateX: '50px', scaleY: 1, easing: 'ease-in'},
  {offset:0.1, translateX: '120px'},
  {offset:0.5, translateX: '100px', emit: "I'm triggered"},
  {offset:1  , translateX: '75px', scaleY: 0.5},
], {duration: 1000});

// plate.duration = 1000;

plate.on("I'm triggered", function(){
  console.log("Henlo", plate.currentTime);
});

// plate.currentTime = 100; -> 100ms = offset 0.1
// Will immediately play from 100ms if above was set

plate.play();

Parallel Timeline

Animate every timeline parallely.

var plate = Timeplate.parallel(/* Default duration for one timeline */ 1000);
plate.timeline = [
  Timeplate.for(/* El Selector */ '.Apple', /* Keyframes */[
    {offset:0  , translateX: '50px', scaleY: 1, easing: 'ease-in'},
    {offset:0.1, translateX: '120px'},
    {offset:0.5, translateX: '100px', emit: "I'm triggered"},
    {offset:1  , translateX: '75px', scaleY: 0.5},
  ]),
  Timeplate.for('.Orange', [
    {offset: 0.5, translateX: '75px', scaleY: 0.5, easing: 'ease-in'},
    {offset: 1  , translateX: '50px', scaleY: 1},
  ]),
];

plate.on("I'm triggered", function(){
	console.log("Henlo", plate.currentTime);
});

// plate.currentTime = 100; -> 100ms = offset 0.1
// Will immediately play from 100ms if above was set

plate.play();

Series Timeline

Animate ordered timeline from first index and continue to another timeline.

var plate = Timeplate.series(/* Default duration for a timeline if not set */ 1000);
plate.timeline = [
  Timeplate.series(/* El Selector */ '.Apple', /* Keyframes */[
    {offset:0  , translateX: '50px', scaleY: 1, easing: 'ease-in'},
    {offset:0.1, translateX: '120px'},
    {offset:0.5, translateX: '100px', emit: "I'm triggered"},
    {offset:1  , translateX: '75px', scaleY: 0.5},
  ]),
  Timeplate.for('.Orange', [
    {offset: 0.5, translateX: '75px', scaleY: 0.5, easing: 'ease-in'},
    {offset: 1  , translateX: '50px', scaleY: 1},
  ]),
];

plate.on("I'm triggered", function(){
  console.log("Henlo", plate.currentTime);
});

// plate.currentTime = 100; -> 100ms = offset 0.1
// Will immediately play from 100ms if above was set

plate.play();

Combined Timeline

Play your ordered timeline inside of a timeline easily.

/*
             Series 1 Timeplate

                [Parallel 1]
 [Series 2] --> [Parallel 2] --> [Series 3]
                [Parallel 3]
 */

var Series1 = Timeplate.series(1000);
Series1.timeline = [
  // Series 2
  Timeplate.series(1000, [
    Timeplate.for(...), // Dummy element animation maybe..
  ]),

  // Parallel 1,2,3
  Timeplate.parallel(1000, [
    Timeplate.for(...), // Playing together
    Timeplate.for('.element', [ // Playing together
      {offset: 0.5, emit:"middle animation"}
    ]),
    Timeplate.for(...), // Playing together
  ]),

  // Series 3 (Will be played after Series 2)
  Timeplate.series(1000, [
    Timeplate.for(...),
    Timeplate.for(...),
  ]),
];

Series1.on('middle animation', function(){
  // May be inaccurate
  //                      Series 1 + Paralel * 0.5
  Series1.currentTime === 1000     + 500;
});

Series1.play();

License

Timeplate is under MIT License

But don't forget to put a link to the repository, or share it maybe.