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 screenshot showing the finished bot posting a flag and asking about a corresponding capital, followed by a reply from me with a correct answer, and the bot accepting it.
A tinted screenshot of profile fields on Mastodon, showing a newly added

Automating your Mastodon profile with Pipedream.com

Show the current time and weather in your city, change your profile picture, or show what you're currently listening to on your Mastodon profile.

#api #automation #mastodon #mastodon-api #mastodon-py #pipedream-com

Screenshot of the finished Mastodon bot posting a protest art image with a raised fist in solidarity.

💻 Browse all