Webmaker tutorial tip: Run an animation when user opens a specific slide

So I’ve been working on my next tutorial, A Gentle Introduction to CSS3 Animations, which I should be posting some time later today or tomorrow (EDIT: it’s out now), and I needed to find a way to run an animation when the user opens a specific slide. I should mention that I’m using this neat Webmaker tutorial template.

The solution is very simple:

$(document).on('click', '.next, .previous', function () {
  switch ($(".current").text()){
    case '2':
      // Do something.
    break;
    case '3':
      // Do something else.
    break;
  }
});

To see the full code, you can remix this template. I kept the modifications to the original template to a minimum and only used alerts to show an example of what you can do, but you can obviously do a lot more – animate elements, ask questions, show modals, etc. Once I publish my tutorial, I will have a much better example.

UPDATE: The way I used this myself was on my latest tutorial. Each time you open a slide #2, you will see the animation fade in (the element starts hidden, fades in when slide #2 is opened and then it hides again if you navigate to a different slide).