Working with Timeline

[Home] > Working with Timeline

This content we learn how to create and use a timeline.

Create the timeline

Element5JS provide you a method like as timeline5.Create() for creating the timeline.

let timeline = timeline5.Create({
  name: 'leftToRight', 
  keyframes: [
    {time: '0', style: {transform: 'translateX(100%)'}}, 
    {time: '100', style: {transform: 'translateX(0%)'}}, 
  ],
});

You need to specify the name of timeline and modify the keyframes of the timeline for finish the animation timeline.

Play the animation

After you had created timeline, you would like to play it.

$.create("h2#top")
.text("Timeline")
.addedBy($.GetBody())
.Play(timeline);