The Rapid Elearning Blog

animated gifs

Recently I shared some free animated gif resources: animated icons and backgrounds. If you’re using Rise or Rise.com it’s as simple as inserting an image. They’re great for novel attention-getters or simple instructional procedures.

free animated gif interaction

If you’re using Storyline 360, with triggers and state changes you can do a bit more to control how the animated gifs work in your course.

Animated gifs are great, but they do loop. Thus, when you insert them in the slide they just continue without end.

To make it more interactive, I like to insert a static image and then interact with the image to activate the animated gif.

animated gif

Click to view the example.

The demo above shows a few ideas:

  • Selected state is like an on/off toggle. Press on the image to toggle between the static version and animated gif.
  • Hover state allows you to mouse over the static image to reveal the animated gif and mouse away when you want to leave.
  • Down state is like the mouseover, but works by pressing down on the image to activate the gif, and releasing the mouse, stops it. I like this option the best.

Bonus idea: do the opposite and start with the looping animation and create an interaction where the animation stops when clicked.

  • Visited state indicates when an object has been clicked. Use the animated icons as markers and then insert the static image in the visited state. This provides a nice visual indication of what’s already been viewed.

View the tutorial on YouTube.

What’s cool about all of the choices above is that they’re super easy to build and don’t require any triggers. Sometimes the looping can be a bit distracting to start, so having an interactive option is nice. I like them because instead of a looping animation it allows the image to become interactive where the user can click to view it and activate the animation.


Upcoming E-Learning Events

  • April 20 & 21 (Brisbane). Postponed until September. Details coming soon. Articulate Roadshow: Learn more and register here.
  • April 23 & 24 (Melbourne). Postponed until September. Details coming soon. Articulate Roadshow: Learn more and register here.
  • November 9 &10 (London). Details coming soon.

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

 


2 responses to “Creating Interactive Animated Gifs for E-Learning”

Thank you for sharing practical insights on using Storyline to incorporate animated GIFs.
For the why and how of animated GIFs, do check this blog.
https://blog.commlabindia.com/elearning-design/animated-gifs-corporate-training

May 13th, 2020

This is great! Thanks for sharing.
I wonder how you created the custom animated gifs… what tool do you use? an adobe product like AI?


Leave your two cents.

Please enter comment below: *

* indicates a required field