This great discussion about Rollover Triggers recently came up in the forums, where community member David Baxter was looking to recreate this interaction from the New York Times website. I thought this would make a cool download, so I created this interactive timeline and added it to the downloads section!

BEFORE

Now some of you might be wondering… how do you go about editing this template to make it your own? Let me show you three steps to getting that done.

Step 1: Edit the Text and Character Images

The first thing you’ll want to do is update the text and the character images. When you do this, keep in mind, the images on the timeline do not have to be characters, it could also be images of objects or symbols. Here’s how my slide looks after I’ve updated the text and changed the character images:

Don’t forget to pop into the existing layers (labelled 1-4) to also edit the images and text on the layers. Remember to add a nice fade-in animation to all the objects on your layers to give it that smooth transition effect. Here’s how my layers look after:

Step 2: Edit Shapes and Colors

The colorful rectangular bars all along the timeline indicate a timespan. You’ll want to adjust those according to the information in your timeline. Now is also a good time to add all of them (you’ll notice the template has only the first four).

While you’re doing that, it’s a great time to make adjustments to that turquoise accent color, to make sure it matches your own project’s color scheme. In my example, I switched it up to a powder blue. Once more, you’ll also want to go into each layer to adjust the bar on the timeline and the colors there.

Step 3: Add New Layers

Your final step is to add the new layers in your interaction. To do this, simply duplicate an existing layer and update the text, imagery, and the column on the timeline that is highlighted. You’ll also go back to the base layer and add a trigger to the corresponding circle on the timeline. The trigger will display the appropriate layer when the mouse hovers over the circle.

There you have it: three easy steps to customizing this template. And remember, there’s much more you can do. You can change the background, edit the fonts, and completely customize the color and text to look any way you want it. Hopefully this template can serve as a good starting point for your next interaction.

Got any tips of your own about how you would tweak this? Let me know in the comments!

Want to try something you learned here, but don't have Articulate software? Download a free trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

3 Comments
Rod Schmidt
Jon Crumpacker

This is great Nicole and I appreciate the effort. I would like to offer that this tutorial is in the spirit of how most innovation happened throughout the history of the web. I believe that a large percentage of all web design incorporated a healthy dose of "view source" as the very starting point. Unless you use the images as they are from the interactive or clearly prove that there was a financial gain AT THE EXPENSE OF THE NYT, this could never be construed as a copyright violation. In fact, I would argue that this indeed proved beneficial to the NYT by clearly crediting the original creator and driving new traffic to their website (I had not seen this story) which clearly DOES provide financial gain TO THE NYT. And really, change the design 10% and be done with it. I'm absolutely... Expand