Blog Post

Articles
2 MIN READ

How to Create GIF-like Animations Entirely in Storyline 360

SarahHodge's avatar
SarahHodge
Former Staff
5 years ago

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!

 

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.  

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.

 

Published 5 years ago
Version 1.0
Animation
Article
Articulate 360
how to
storyline 360
  • ChrisCopley-a50's avatar
    ChrisCopley-a50
    Community Member
    3 years ago
    Of course! I wish I'd thought of that, it's a much more elegant solution - off to update my project now :)

    Thank you.

    Edit: Jumping to 0s on the layer caused a flicker in the graphic - as if the layer is loading up blank and then the first image is suddenly appearing. To overcome this I've extended the initial image by 0.25s and set the trigger to jump to 0.25s on the timeline. Perfect animation, no flicker, and many fewer elements on the slide.

    Huge thanks :)
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      3 years ago
      No probs Chris. Glad to be of help.

      The flicker can also be overcome by using the layer to animate items on the base layer. The layer itself can be completely blank - think of it as a program running in the background.

      My Spinning Plates demo uses a similar technique if that's any help to you.
      • ChrisCopley-a50's avatar
        ChrisCopley-a50
        Community Member
        3 years ago
        That's brilliant! I've downloaded that one for my 'examples' folder (it should really be called 'ideas to nick' lol)
  • ChrisCopley-a50's avatar
    ChrisCopley-a50
    Community Member
    3 years ago
    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 animation is the one that repeats.

    On the slide this looks fine, but I think that having to use twelve images and a trigger in the place of a single animation would have done seems a lot of work.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      3 years ago
      Hi Chris - this is a great question and I have overcome this by using looping layers which run the animation while the base layer proceeds as normal.

      This way you can have a 6 second looping animation take place while a 10 second audio runs unaffected.
  • TreyMcNabb-f8db's avatar
    TreyMcNabb-f8db
    Community Member
    5 years ago
    I think we should have a challenge specifically for the jump to trigger. I used it after reading Jonathan's article on the spinning plates, and recognized it in your Polaroid camera example. Nicely done!
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      5 years ago
      That would be fun, Trey! I would love to see what you came up with.
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      5 years ago
      Awesome work, Jonathan! I really like your spin on the jump-to-time trigger 😊. I may or may not have answered incorrectly to hear the plates smash. Loving the sound effects! I was so excited when this feature came out. I was doing an entire workaround before. Thank you for sharing all your amazing resources!