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).

More tutorials

A tinted, zoomed in screenshot of a JSON object showing server information about a Mastodon instance.
A tinted screenshot of two charts, one showing the popularity of various fediverse platforms (with Mastodon far ahead of the rest), and the other chart showing distribution of domain creation dates, mostly clustered around 2023.
A tinted screenshot showing the @mtaupdates Mastodon profile and a few example posts with subway status alerts.

💻 Browse all