I’m always looking for cool new ways to incorporate interactivity and animations into my e-learning samples. So I was really excited when I came across this really neat animated hover text effect in Articulate Storyline 2 while I was recently building out a course and trying out some different animation ideas. Click on the example below to check it out.

View Demo | Download template

You’ll notice that when you hover over an image a line of text flies in, and then flies out when you move the cursor away from the image. It creates a fun effect! Let me show you how to create this animated hover text in three quick and easy steps.

Step 1: Add Your Image

The very first step is to insert the object or image on your slide that will have the hover effect. In my example, I used images of fashion accessories.

Step 2: Add Your Hover State

The second step is to create the hover state on the object or image that learners will hover over. Select the object or image and add a “hover” state. On the hover state, add in the text and format it to look how you want it to look. Now, here’s the important part: add the animations to the text you’ve just added to your hover state. In my example I added an entrance animation (Fly In from Left) and an exit animation (Fly Out to Right).

Step 3: Re-Create the Hover State

The third and final step is to re-create that same hover state for the other images or objects in your animation. The fastest way to do this is to go back into the hover state you already created and copy the text you inserted. Then, select the next object or image and create a hover state for it. Next, paste the text you’ve copied and update the wording. This text will automatically retain the animations already assigned to it. Repeat this step for all the other images or objects in your animation, until they all have a hover state with the animated text.

Want to see this exact process step-by-step? Then have a peek at this video tutorial:

 

It’s that quick and easy to create cool interactivity with Storyline 2—just three simple steps to build this awesome animated hover text effect! Got questions or comments? Leave them below. And don’t forget to follow us on Twitter.

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.

24 Comments
Herve Lacroix
Nigel Ribeiro