Custom transition timing in impress.js

Question

I'm trying to create different transition times for each slide in an impress.js presentation. I found the code below in a book about impress.js. But checking it on JSLint it shows errors. I am not good enough with javascript to correct this myself. Anybody willing to help me out?

• Edit: I need a solution without jQuery. This is because impress.js allows you to navigate through the presentation with spacebar and arrow keys and I don't want to lose that functionality.

I found that when navigating with the keys (while jQuery is timing the auto-advance) it does not respect the position where you navigated to, but forces you away from where you are. I would like instead that if you navigate to a slide (position) the auto-advance starts running the custom set time for that particular slide and advances to the next slide when the set amount of time has passed. This would be an awesome addition to impress.js. I hope this can be done. Thanks for your effort!

JSFiddle: http://jsfiddle.net/5sSE5/8/ (script added at the end of impress.js)

    var step_transitions = [
        { "slide": 1, "duration": 2000 },
        { "slide": 2, "duration": 4000 },
        { "slide": 3, "duration": 1000 }
    ];

$(document).ready(function () {
            var time_frame = 0;
    step_transitions.filter(function (steps) {
        time_frame = time_frame + steps.duration;
        setTimeout(function () {
            api.goto(steps.slide);
        }); time_frame;
    });
});

Addition: below script respects keyboard navigation, but all the slides have the same transition time.

    var impress = impress();
  impress.init();

  document.addEventListener('impress:stepenter', function(e){
    if (typeof timing !== 'undefined') clearInterval(timing);
    var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 10000); // in ms
    timing = setInterval(impress.next, duration);
  });

Answer 1

There is an error in your code in the setTimeout:

setTimeout(function () {
    api.goto(steps.slide);
}, time_frame);

It seems that the time_frame variable should be second argument of the setTimeout method.

Update

You also forgot to initialize the api variable before using it:

var api = impress();

You also need the jQuery library to be able to use the $ function.

See updated fiddle

Update 2

I reworked your code to make it continue from the first slide after the last is reached:

var step_transitions = [
    { "slide": 0, "duration": 3000 },
    { "slide": 1, "duration": 4000 },
    { "slide": 2, "duration": 2000 }
];

$(document).ready(function () {
    var time_frame = 0,
    api = impress(),
    current_step_index = 0,

    do_transition = function (){
        var step = step_transitions[current_step_index];
        api.goto(step.slide);
        current_step_index++;
        if(current_step_index >= step_transitions.length){
            current_step_index = 0;
        }
        setTimeout(do_transition, step.duration);
    };

    //initial run
    do_transition();
});

Note, that slides must start from 0, not 1.

See updated fiddle