Have you ever found yourself searching endlessly for the perfect GIF—one that worked with your content and was legal to use—but you just couldn’t find one? Don’t GIF up! With Storyline 360, you can easily create custom GIF-like animations without ever leaving the app. 

And in case you’re wondering how to pronounce GIF, check out this article by our very own Anthony Karcz

1. Draw Up a Plan

What are you trying to achieve with a GIF? What graphics do you need to accomplish your idea? Think about all the different moving pieces and how they’ll work together. Once you have a good idea of what you want to create, storyboard it. I decided to create an animated GIF to convey instructions in a more digestible way. I drew my idea in a notebook and made a list of all the different components I needed.     


2. Gather Assets

Take a look at your list, and start searching for graphics to bring your plan to life. Content Library 360 has millions of icons and illustrations to choose from. You can also download free graphics from the E-Learning Heroes community, or you can create your own. For my project, I downloaded this free community resource, inserted icons from Content Library 360, and created my own custom graphic.  

3. Add Animations 

Once you’ve inserted your graphics into your Storyline project, it’s time to animate. Depending on the complexity of your plan, you might need to adjust the timeline, add animations, or edit states. I used fading animations, motion paths, and different object states in my example.


4. Make It GIF-like 

With animations in place, you’re ready to make it loop. All you have to do is add the jump-to-time trigger. That’s it!

jump to time trigger

 

I set my trigger to jump to time 0s, so after my animation plays, it jumps directly to the start of the timeline to create this GIF-like animation.  

Gif animations in Articulate Storyline

And that’s all it takes to create custom GIF-like animations in Storyline 360! Using these animations in your courses is truly the GIF that keeps on giving. You can check out my full example here. What meaningful ways have you used GIFs in your e-learning? Let me know in the comments below! 

Additional GIF-spiration

For more ideas on how to use GIFs effectively in your e-learning courses, check out these free resources: 

 

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.

 

10 Comments
Jonathan Hill
Chris Copley

This was very helpful as far as creating the animation is concerned, but I can't see how this works with accessibility features. I have a six-second looping animation which I need to use on a slide with a ten-second text-to-speech clip. Jumping back to the beginning to restart the animation restarts the audio clip. It would be so much easier if I could simply import the animation that I've already created in Photoshop without having to import individual frames and set all the timings, etc. Edit: I realised that I could triplicate the images and past three versions of each frame onto the slide. The animation runs twice while the text-to-speech is playing, then starts again at 12 seconds in. At 18 seconds I've used a trigger to jump back to 12 seconds, so the third instance of the a... Expand

Chris Copley