Creating custom transition timing

We have to start this process by defining a custom format to store steps and transition durations. We will be using a JavaScript array which looks like the following:

var step_transitions = [
            { "slide": 1, "duration":3000 },
            { "slide": 2, "duration":5000 },
            { "slide": 1, "duration":5000 },
            { "slide": 3, "duration":5000 },
    ];

We are using step number and duration between each step transition in the given array. Only a few astute readers will notice that the step numbers are not in order. That means we can use any step number at any given time making the automation bidirectional instead of forwards or backwards.

Tip

You can create an automated flow of your presentation steps with this technique. Moving forward or backward in any given time is as simple as placing a record in the step_transitions array.

Now, let's go through the implementation of this automation technique:

$(document).ready(function(){
    var time_frame...