impress.js step events

JavaScript provides a list of in-built events and we can also use event listener functions on those events. Likewise, we can also create our own custom events. impress.js provides two custom events for handling step transition functionality. stepenter and stepleave is used in the core code to handle these events. Let's take a look at the implementation in the impress.js file:

root.addEventListener("impress:stepenter", function (event) {
    event.target.classList.remove("past");
    event.target.classList.remove("future");
    event.target.classList.add("present");
}, false);

root.addEventListener("impress:stepleave", function (event) {
    event.target.classList.remove("present");
    event.target.classList.add("past");
}, false);

In each step transition, the stepleave event of the current step is fired first, followed by the stepenter event of the next step. Inside the stepenter event, we remove the past and future classes and add the present class to make it an active...