7 Pro Tips for Working with Motion Path Animations in Storyline 360
Animations can be a powerful way to explain a concept, tell a story, or make your content memorable. Storyline 360 has a variety of animation options—including entrance, exit, and motion paths. With motion path animations, you can control how your objects move and bring your ideas to life. Here are some time-saving tips to help propel you forward when working with motion path animations. 1. Rename Motion Paths When you add a motion path animation to an object in Storyline 360, a name is automatically assigned. If you plan on adding multiple motion paths, it’s a good idea to rename each one. This will make it easier to identify which motion path you’re working on when editing triggers. 2. Copy Animations If you plan on using the same motion path animation on several objects, save time by copying the animation from one object to another using the Animation Painter. By double-clicking the Animation Painter, you can apply the same animation to multiple objects one after the other without having to click the Animation Painter over and over again. To turn it off, click it one last time or press the ESC key on your keyboard. Did you know? When you copy and paste an object, any animations you’ve added to the object are also copied over. So if you’re using the same object multiple times, add any animations you want to include before you copy it to save time. 3. Sync Using Cue Points As you build content, you might change your mind about when you want your motion path animation to start. Syncing your motion path to a cue point gives you the flexibility to change the motion path timing without having to edit the trigger each time. All you have to do is drag the cue point along the timeline until the timing feels right, and the motion path will start at the new time. 4. Select the Object Path to Edit To edit a motion path, you can select the start or end point individually using your mouse and drag the point to the desired location. If you have multiple start or end points overlapping each other, you can easily select and edit them without having to hide objects from your timeline. Simply select the line of the object path you want to edit. It will turn bright blue while the other objects and their paths will fade. Then, move the start or end point as needed. Did you know? Another way to fine-tune a motion path is to select the start or end point of one or all of the objects and edit the X and Y coordinates. This is great for times when you need to be super-precise. 5. Change the Easing Option By default, Storyline 360 automatically assigns an ease-in and ease-out effect to your motion paths. This controls the acceleration and deceleration of an animation. If your animation needs to move at the same pace across the screen, then you’ll want to edit the easing direction to none. 6. Orient Shape to Path There might be times when you need to include an object that faces a certain direction as it follows a path—for example, a car making a right turn. By selecting Orient Shape to Path, the object will always face the direction it’s moving, even when it travels on a nonlinear path. 7. Use a Relative Start Point Perhaps you want to create an interaction where the object can move multiple times depending on the learner’s choice. For example, let’s say you created a racetrack and want the learner’s car to move forward whenever they answer a question correctly. Instead of duplicating the object and creating motion paths for each possible outcome, you can select Relative Start Point to move the object along the motion path starting from its current position. For more ideas on how to use this feature, check out this tutorial. Did you know? You can add more than one motion path to the same object and have each begin at the new location of the object based on previous movements. For more ideas on how to use this feature, check out this free Storyline 360 download by Samuel Apata. Motion path animations give you the flexibility to quickly create content that’ll move your learners. What tips do you have for working with motion paths? Share your ideas in the comments below. 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.How I Built This Recycling Parallax Interaction in Storyline 360
If you’ve ever been on a road trip and gazed out the side window (hopefully only as a passenger 😉), you’ve probably noticed that objects close to you—like trees—appear to zip by really fast, while objects further in the distance—such as mountains—seem to barely move. This phenomenon is known as motion parallax. In the digital world, the parallax effect gives the illusion of depth and movement. Combine that with a realistic learning scenario—like in this Recycling Guide example—and you’ve got yourself a truly engaging interaction. View | Download Let’s take a look at how to create this interactive parallax example in Storyline 360! Create layered components To create a parallax effect you need several layered components that move at different speeds. So, the first thing I did was create all my slide elements with the different layers in mind. Using a combination of shapes in Storyline 360 and Content Library 360 assets, I ended up with six layered components. Component 1: Recycling bin For this example, I wanted the recycling bin to be the main focus—after all, that’s what the course is all about. Since I planned to tilt the bin and make the wheels spin, having it front and center would give the optical illusion that the bin was rolling as the background moved. Component 2: Park Next, I needed to create the main interactive piece—the park. This is the only component that learners engage with to reveal additional content, so I was very intentional about how I designed the space. Since the graphics were going to move horizontally, I made sure to extend those designs past the slide size. I carefully placed each object—such as buttons and litter—in different parts of the park and in a specific order to help guide the experience. And because I used only Content Library 360 icons/illustrations and simple shapes, it was easy to move things around and reposition them as needed. Pro tip: Before duplicating a button, create all the states beforehand so they copy over. Big time-saver! Component 3: Mountains (light) To add a sense of depth and movement, I included mountains in the background. I combined several different mountain-shaped icons to create the extra-wide graphic. I made the first mountain layer a light tan color since objects up close are generally lighter in color. Component 4: Mountains (dark) Behind the lightly colored mountains, I added a darker version for contrast. To save time, I copied and pasted some of the shapes from the lighter mountain. Since not all mountains look alike, I flipped and resized some of the shapes so that when they moved, they didn’t line up exactly the same. Component 5: Sky The scene wouldn’t be complete without a sky! I added a sun for reference. I mostly kept this component simple to save time and to keep the main focus on content. Component 6: Frame (optional) Okay, so this is where it gets a little tricky. I could’ve made things easier by extending the sky and ground to fill the slide. That way, I wouldn’t need a frame and objects could freely animate on and off the rectangular slide. But I really wanted to create a unique learning experience. To give this course a custom look and feel I designed a frame to show content within a unique shape. The frame is comprised of the title, a white border, arrow buttons, a background, and two side shapes to match so that the other components only show inside the unique shape. Pro tip: To make the slide look seamless with the player background, go to your Player settings and change the background color to match. And here’s how it all looks together. Save static objects Once I created all the components, I realized there were a lot of objects on my slide. So, I decided to make my file easier to manage by saving some of the layered components that had a lot of objects—such as the Park, Mountains (Light), and Mountains (Dark)—as their own image and then replacing them with a scalable vector graphic (SVG) to keep image quality. For example, I selected all the objects in the Mountains (Dark) component, right-clicked, and selected Export Shape as Picture. I saved the shapes as a PNG. For the best image quality, I simply opened that PNG file in Adobe Illustrator and saved it as an SVG. I went back to my Storyline 360 project, inserted and resized my SVG to match the objects on the slide, and then deleted all of the Mountains (Dark) objects. I repeated this process with the Mountains (Light) component. For the Park component, I took a few extra steps before exporting it as a picture since it had a lot of interactive elements and I only wanted to save the static parts of the image. On the timeline, I clicked the eye icon to hide objects with states, animations, and text so I could still edit them or assign triggers at any time. Here are all of the static components I exported as a shape to save as an SVG. And for context, here are all the elements I did not include in the export. After inserting and resizing the Park SVG, I moved it beneath the hidden park objects on the timeline. I selected the eye icons to make all the Park components visible again where they remained in the same location as designed. Then, I grouped them and renamed the group “Park.” Saving some of the components as an SVG really sped up my workflow. With fewer objects on my timeline, it was easier to select the ones I wanted to edit or add triggers to. It also reduced the file size so content could load faster. To learn more about scalable vector graphics (SVG), check out this article: Storyline 360: SVG Support. Get things moving With all the graphics on the base layer in place, I created several additional layers to reveal content and help tell the story. Now it was time to connect everything with movement. To explain how to create the parallax effect, let’s roll through the example.😊 Background When you move right, the background moves left, making it look like the recycling bin is rolling forward. If you move left, those same background components move right, making it look like the recycling bin is rolling backward. To create this parallax effect, I added motion path animations to move some of the background components—Park, Mountains (Light), and Mountains (Dark). And in case you didn’t already know, you can add more than one motion path to the same object. That feature really came in handy here. For each component, I added a Left and Right line motion path. Since I wanted the components to all move at the same pace, I edited the easing direction to None for each motion path. I also selected Relative Start Point to ensure each component always moved from its current position. Next, I changed the duration of the paths to one second. I chose this duration because I planned to have the recycling bin roll left or right for one second as well. That way, all the animations would stop and start at the same time. To make it easier to manage triggers later on, I also renamed the motion paths to include the component name and the direction of the path. For example, I named the motion path that moves the park group right “Park Right.” Next, I changed the length of the paths. This is where it differs for each component. Since I wanted the background objects to move at a slower speed than the foreground objects, I edited the left and right motion path lengths for each component to the following. Park: 180 px Mountains (Light): 90 px Mountains (Dark): 40 px Using these settings, the furthest-away component, Mountains (Dark), would only move left and right 40 px during the one-second duration. Whereas, Mountains (Light) would move about twice the distance, at 90 px, during that same time. And that was it for the motion path settings! Now it was time to add triggers to make these components move in the right direction. By default, when you add a motion path animation to an object, a trigger is automatically created. Since I wanted the components to move based on the user selecting Right or Left, I deleted those triggers from the base layer and instead added them to the Bin Right and Bin Left layers. On the Bin Left layer, I added triggers to move the components right when the timeline starts. And on the Bin Right layer, I added triggers to move the components left when the timeline starts. Now, when the learner selects Left or Right, they’ll see the background move accordingly. Recycling bin Now for the recycling bin. I put it front and center to make it appear like it was rolling when the background moved. When you go right, the bin tilts and rolls forward. When you move left, it tilts and moves backward. After one second, the animations stop and the recycling bin returns to its upright position. To create this optical illusion, on the Bin Right and Bin Left layers I hid the recycling bin that was on the base layer so it was no longer visible. In its place, I added a tilted bin with dirt paths depending on the direction it was going to move. Bin left layer Bin right layer Next, I added a Spin entrance animation to the wheels. Just like a regular wheel, if you go left, the wheel’s direction moves counterclockwise. If you go right, the wheel’s direction moves clockwise. As for the amount it spins in each direction, I landed on a quarter spin since that looked the most accurate. To emphasize the direction the recycling bin was moving, I included dirt paths and added Wipe and Fade animations. And because both the duration of the background components and the timeline on these layers are set to only one second, all the animations come to a stop at the same time. To ensure the recycling bin returned to its original upright position, I added a trigger to hide whichever layer you’re on—Bin Left or Bin Right—when the timeline ends. The learner automatically returns to the base layer, where they can continue the learning journey. Set boundaries With the freedom to move the recycling bin left and right as you please, you may be wondering how I stopped the background components from moving too far. If you go left at the very beginning, you’ll see a little tortoise and a deactivated Left button so you can’t move any further. To keep learners from navigating outside of the main area, I needed to set some boundaries. To achieve this, I added a Deactivated button over the Left button that only shows when you navigate to that side of the screen. To make the button visible, I added a transparent shape and pasted it inside the existing group, “Park.” When you navigate left, the Park group moves right, causing the bin and the transparent shape to intersect, which changes the Deactivated button to Normal (visible). When you navigate away, it stops intersecting and returns to its original hidden state. I used this same technique at the end of the learning experience. When the recycling bin intersects with the transparent shape next to the house, it shows the final layer. This allowed me to end the parallax learning experience at the end of the graphic. Wrap-Up And that’s all there is to it! Using the parallax effect can create an engaging learning experience that truly brings your content to life. If you haven’t already, download this Recycling Guide project to take a closer look at how I built it. For more advice on working with motion paths, head on over to this article: 7 Pro Tips for Working With Motion Path Animations in Storyline 360. If you want to see more ways to create a motion effect, check out this webinar: Create Parallax Effects With Sliders in Storyline 360. Want to try to create your own parallax example, 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.13 New and Enhanced Features That Will Help You Get the Most From Articulate 360
There’s so much we’ve been working on lately that we’re thrilled to share with you. If you want to expand the e-learning experiences you can create, streamline your development processes, and get great training out fast, check out these new and upcoming features that will help you do all that and more. Create exciting and engaging e-learning Rise 360: Linked Padding Speed up your Rise 360 layout formatting with this new option to link the padding on the top and bottom of a block together. When this feature is on, you can quickly change their values at the same time. Need to adjust the top and bottom padding independently? Simply click the Unlink Padding icon. To learn more about all your block padding options, check out this post. Rise 360: Random Block Images Automatically liven up your Rise 360 designs with this enhancement. Instead of seeing the exact same photo every time you insert a block with a background image, Rise 360 now randomly selects background images on a block-by-block basis. Rise 360: Team Folders Enhancements Now working with large numbers of Rise 360 courses is even easier thanks to this set of new Team Folders features. You can quickly view just the courses you created with the Owned by Me filter. Accessing courses that have been shared with you is faster too, as they’re now automatically added to the Shared with Me folder. And if you want to fully reorganize your folders, Move Dialog allows you to move both source files and shortcuts in a jiffy. Want to know more? Check out this post. Rise 360: Women’s History Month Course Celebrate the broad spectrum of ways women have contributed to history, society, and culture with this Rise 360 real-content template. This fully built course covers the history of women’s rights in America and strategies for continuing to move gender equity and equality forward. Share it with learners right away or customize it as much as you like! For more information about this course, give this post a read Storyline 360: Emphasis Animations Grab your learners’ attention with this new selection of Storyline 360 emphasis animations. You can now add effects like pulsing, shaking, and teetering to shapes, images, buttons, characters, markers, textboxes, videos, and more. Learn more in this post. Storyline 360: Global Notes Formatting Adjusting the font color, size, style, or paragraph spacing in the Storyline 360 Notes panel is easier than ever! With this feature, you can now customize the Notes panel formatting across the entire project in one fell swoop. What a timesaver! If you’re excited to know more, check out this post. Storyline 360: Player Tooltips Help learners get to know the modern player controls in Storyline 360 with these accessible tooltips. If someone isn’t sure what a particular player button or control does, all they have to do is mouse or tab over to it to display a bite-size pop-up with more information. Find out more here. Storyline 360: Background Audio Volume Variable Fine-tune your course’s audio with this new Storyline 360 variable. With it, you can raise or drop a slide’s background audio by whatever percentage you choose—adding more precision and customization to an already helpful feature. Collaborate with team members and stakeholders Review 360: Manage Integrated Comments Seeing Review 360 comments directly in Storyline 360 and Rise 360 is a real timesaver. But what about when you need to have separate, independent reviews of the same course? Thanks to this new feature, that’s easy! With it, you’re able to see the comments for multiple Review 360 items in your authoring app workflow. That means you can create multiple copies of your course in Review 360—one for each reviewer segment—but still see everyone’s comments in your original Rise 360 or Storyline 360 file. Curious to know more? Check out our feature posts for both Storyline 360 and Rise 360. Distribute courses to all your learners Reach 360: Starter Plan If you have an Articulate 360 Teams subscription, distributing and tracking training just got easier. That’s because you can now use Reach 360 Starter to share courses with up to 300 learners per year at no additional cost. This new Reach 360 Starter access makes it easy for everyone to try out all the features of our fast, flexible, and frictionless LMS. Check out the details here. Reach 360: Manager Role Give people just the Reach 360 access they need with the new Manager role, which can invite and remove learners, assign training, and view reports for any group assigned to them. It’s perfect for when someone needs more administrative powers than with the Reporter role—but just for one or more specific groups. Need help determining which Reach 360 role is right for a particular user? This article compares the permissions for each role, making it easy to narrow down the option that best meets your needs. Wrap-Up There’s a lot here to be excited about! And since all of these new features are available right now, trying them out is as simple as opening up your Articulate 360 apps. Not only that, but there are lots more exciting features coming this year—including AI capabilities. So keep an eye on our roadmap and E-Learning Heroes to stay in the loop about all the other cool functionality we’ll be adding soon. Feeling left out because you don’t currently have an Articulate 360 subscription? Not to worry—just start a 30-day free trial to try out all these helpful features and more. You can also subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice sent directly to your inbox. If you have questions, please share them in the comments.6 Meaningful Ways to Use Animations in E-Learning
When course designers want to make content more engaging for learners, one of the most common things they turn to is animations. Effectively using animations in e-learning can be a great way to connect learners with content and create a truly engaging experience. Before you start adding animations to your projects, it’s important to know when and how to use animations in a meaningful way. In this article, I’ll walk you through some key times you might want to consider using animations to enhance the learning experience. Let’s take a closer look! Teach a Concept Often, course designers default to the same formula whenever they explain a concept: a static image with text. Instead, why not show learners what that concept looks like in action? Check out this driving example by Allison LaMotte that uses animations to illustrate the rules of the road: View the demo | Get a copy Explain a Process It’s often easier to understand a process if you can see it for yourself. Sure, you can explain it, but whenever possible, try using animations to show each step, like Tom Kuhlmann does in this beer-brewing example: View the demo Tell a Story Animations can be particularly useful when you want to tell a story. A simple animated movement can catch and keep your learners’ attention, like in this example by Trina Rimmer: View the demo | Download the file Show Data Using animations to show learners data—instead of just telling them—can have a greater impact and make content more memorable. So the next time you’re tempted to just type out all the stats, think about how you can transform that data, likeDavid Tait does in this example: View the demo Give Instructions Depending on your course, you might need to include instructions for your learners. If you’re used to including an instruction screen full of text, why not replace it with animated images to give context, like in this Flashback Quiz: View the demo | Read the article Add Interest Adding subtle animations that are relevant to the content can be a nice change to otherwise static content. These types of animations can spark learners’ interest and elevate your course. Take a look at the subtle animations in each section header of this Dog Care Basics course I created. To grab the learners’ attention, I also added a bit of humor at the start. As a general rule, it’s okay to occasionally introduce lighthearted humor to a course as long as it’s relevant, not offensive, and keeps the focus on what’s most important—the content. View the demo The Bottom Line These are just a few situations where it might work to use animations in your projects to help learners connect with the content. It’s up to you—as the instructional designer—to determine what makes the most sense for your course. And if you’re looking for more tips or inspiration on adding animations to your courses, then check out these helpful resources: How to Create GIF-like Animations Entirely in Storyline 360 5 Ways to Use Animated GIFs in Your E-Learning 6 Awe-Inspiring Animation Examples Built in Storyline Free Animated GIFs for Header Images What meaningful ways have you used animations in your projects? Please share your ideas or examples below! Want to create your own animation, 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.5 FAQs About Using Grouped Objects in Storyline 360
Have you ever worked on a slide with so many objects that you found yourself struggling to click on the one you intended, or maybe spending countless hours adding animations or triggers to each individual item? There’s an easier way. Grouping objects in Storyline 360 is a handy feature that can help you stay organized and work more efficiently. Here are some of the commonly asked questions about working with grouped objects in Storyline 360. 1. When does it make sense to group objects? Working with numerous objects on a slide can start to feel overwhelming. Before you know it, your timeline and trigger panel become an endless list of objects and triggers, which can be time-consuming to manage. Declutter Your Timeline Grouping objects together can help you work more efficiently. Look at these two timelines for the same course. Ungrouped And there are still a ton of objects that aren’t visible without scrolling. Grouped Such a noticeable difference when the objects are grouped! The grouped version is clean and easy to manage. I can quickly show, hide, or lock objects in just a few clicks. Keep Triggers at a Minimum Another benefit of grouping objects is that you can execute one action for an entire group of objects. This cleans up your trigger panel and makes it easier to hide triggers if you need to do some testing. Before: After: Edit Multiple Objects Simultaneously Grouping objects also allows you to edit, move, rotate, flip, or change other attributes all at once, as if they were a single object. You can also resize all the objects in the group while preserving the spacing between objects. 2. What’s the quickest way to group objects? The most common way to group objects is by selecting the objects to group together, right-clicking, and choosing Group: But did you know there’s a faster way? You can save yourself a few clicks (and a lot of time) by using a keyboard shortcut. Simply hit Control + G (or Command + G on a Mac). 3. How do animations work with groups? When it comes to grouped objects and animations, you have two options: Option 1: Apply animations to each object individually. When you want the objects in a group to animate at different times, you can add individual animations to each object. In the following example, you can see that I added animations to each object (noted by each ⭐) and then grouped them together. The following GIF illustrates what the above grouped object with individual animations looks like in action. Option 2: Apply animations to the group as a whole. When you want to animate multiple objects all at once, group them together and then add an animation to the entire group. In the following example, I grouped the objects together and selected the Fly In animation (noted by the one ⭐ at the top left). The following GIF illustrates what a grouped object with one group animation looks like in action. 4. How do I troubleshoot animations with grouped objects? Grouped objects aren’t animating as intended? It’s possible you’ve applied a mix of both animation options I shared above. This happens a lot if you’ve added animations to individual objects and then later decided to group those objects together and add a group animation. To figure out if that’s what’s going on, open the Animations tab and then click on each individual object in the group. Keep an eye on the Entrance, Exit, and Motion Path Animation options as you click each object. If you see an animation has been added to an object, remove it by selecting the drop-down arrow and clicking None or simply deleting the extra motion path. 5. Can you add states to groups? Storyline 360 has built-in states that allow you to change the appearance of an object (such as shapes and buttons) based on the learner’s action. States can only be added to individual objects, not grouped objects. However, you can still edit the states of the individual objects within a group by selecting each object and editing their states. Or you can first edit the states and then group them together. Check out this video tutorial on how to make a group of objects display their individual hover states. Another option is to keep one object of the group on the slide, click Edit States, and paste the remaining objects in the Normal State. Check out this video tutorial on how to work with grouped objects in Storyline 360. More Resources For more information on working with grouped objects, check out these resources: Quick Answers to 6 Frequently Asked Storyline 360 Questions Top 5 Storyline Tips You Might Have Missed in 2019 Everything You Need to Know About States in Storyline 360 What questions or tips do you have about working with grouped objects in Storyline 360? Please share your ideas below. 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.GIFs 101: How to Use, Find, and Make Them
Aside from—you know—the ability to access any information you need in seconds, GIFs are the best thing about the internet. In this post, we’ll talk about what GIFs are, when to use them in your e-learning, where to find them, and how to create your own. You’ll learn everything you need to know about GIFs. (Except for how to pronounce it. We’re staying out of that debate!) What are GIFs? Basically, GIFs are image files that include animation. GIF stands for Graphic Interface Format. And, unlike JPEGs and PNGs, GIF files support animated images. Early GIFs were super basic. They were composed of just a couple of alternating frames, for example: In the 30 years that GIFs have been around, the art form has evolved. Now it’s super easy to find high-quality clips from TV shows and movies, quick clips of cats doing funny things, fun custom artwork, and much more! How can I use GIFs in my e-learning courses? GIFs are also great for your e-learning projects. They offer an easy way to delight your learners with some unexpected movement. And you don’t have to embed a full video or build an animation into your course. Making your learners laugh or expressing an emotion with a GIF can make your e-learning more relatable and more fun. Plus, they’re handy for demonstrating a process or system. Instead of having learners click from one slide to the next to see how a process works, you can use a GIF to give learners that helpful context. GIFs look particularly at home in Rise courses, which are web-based. Check out this example on hurricane preparedness and this one on cardiology observations to see what we mean. Where can I find GIFs? GIFs are abundant online. Some popular places to find great ones include: GIPHY, the most popular search engine for GIFs, allows you to browse for images by category or search to find exactly what you need. Educational GIFs, though it hasn’t been updated recently, has a ton of GIFs on processes, history, how-tos, and more. Imgur is a place for people to share images. A lot of these images are GIFs, and a lot of the GIFs are great. Social media sites such as Twitter are great places to find GIFs. How do I make my own GIFs? There are a couple of ways to make an animated GIF, depending on how involved you want to get. The old-school way provides you with the most control over the process. Here’s a tutorial that shows you how to put together a GIF from several static panels in Photoshop. There are also several widgets that can help you make GIFs quickly and easily. You build them from video snippets using GIPHY’s own GIF Maker App. You can create a GIF from images on GIFMaker.org. Or you can make and style your own reaction GIFs on sites like And I Was Like and GifCam. Get your GIF on! You now have all the knowledge and tools you need to find and use GIFs in your projects. If you have any other questions about when and how to use GIFs in your e-learning (or if you’re just looking for the perfect one for your project), let us know in the comments. And be sure to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.How to Create GIF-like Animations Entirely in Storyline 360
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: Storyline 360: A Bounty Hunter’s Guide to Childcare 5 Ways to Use Animated GIFs in Your E-Learning GIFs 101: How to Use, Find, and Make Them 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.How to Use GIFs as Cover Photos in Rise 360 (with Free GIFs!)
Adding a cover photo to a Rise 360 course is an easy way to make your course look beautiful, inviting, and customized. And you’re not limited to still photos!You can addGIF files to your Rise projects to make them really come to life. That’s why we’re giving away abundle of six GIFsfor you to use in your Rise 360 courses.Grab the download, then check out this simple tutorial to see how easy it is to update your cover photo with one of these gorgeous GIFs: And remember to subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).Whiteboard Animations
A whiteboard animation is a moving picture featuring a designer drawing manually or digitally on a blank white canvas. This animation type is often accompanied by audio narration to add context and engage viewers. These animations are a great way to walk learners through processes and diagrams. They’re often used in explainer videos.
