Animation
123 TopicsStoryline: Drag-and-Drop Animation Effects Template
Here's a drag-and-drop template that's been customized to include exit animations on objects when they're dropped on correct or incorrect targets. View the project Here's a quick video tutorial demonstrating how the effect works:998Views2likes12CommentsStoryline 360: Adding Animations
Storyline 360 has a gallery of entrance, exit, emphasis, and motion path animations that you can apply to shapes, images, text, characters, and more. To learn about synchronizing animations, see Syncing Entrance and Exit Animations and Syncing Motion Path Animations. In this user guide, we'll cover: Adding Animations Adjusting the Speed of an Animation Renaming Motion Path Animations Choosing Effect and Path Options Fine-Tuning Motion Path Animations Copying Animations from One Object to Another Animating Grouped Objects and Answer Choices Making Animations Accessible Adding Animations Here's how to add an animation to an object: Select the object and go to the Animations tab on the ribbon. Click the star icon for the type of animation you want to add (entrance, exit, emphasis, or motion path). Choose an animation from the gallery. Tips: You can add animations to objects on your slides, layers, slide masters, feedback masters, and states. Emphasis animations are available as of January 2024. They're supported only for shapes, images, buttons, characters, markers, text boxes, and videos. Each object in your course can have one entrance animation, one exit animation, multiple emphasis animations, and multiple motion path animations. Adjusting the Speed of an Animation Entrance, exit, and emphasis animations default to a duration of 0.75 seconds. Motion paths default to 2 seconds. You can make them faster or slower by entering a time in the Duration field for the animation. Renaming Motion Path Animations Storyline 360 assigns names to motion path animations, but you can rename them. And it's a good idea to rename them so you can identify them when you're working with triggers. Go to the Animations tab on the ribbon. This reveals the motion path animations you've already added to the slide. Select the motion path you want to rename, then enter a new name for it in the Name field on the ribbon. Choosing Effect and Path Options You can tweak the behavior of most animations by choosing Effect Options (for entrance, exit, and emphasis animations) or Path Options (for motion path animations). Effect Options Path Options You can choose the direction of some entrance, exit, and emphasis animations. You can also modify the intensity of all emphasis animation effects. You can choose a shape, number of spins, or number of spokes for other animations. You can combine some animations with Fly In or Fly Out animations. Just select a direction from the Enter sub-menu. If an object has text, you can also animate the text all at once or by paragraphs. Here's anexample. You can choose the direction of some animations. Motion paths are unlocked by default, meaning they move with the object to which they're applied. If you lock a motion path, it'll move independently of the object to which it's applied. Motion paths start and end smoothly by default, meaning the starting and ending speed is a bit slower than the rest of the animation. This is called easing. Use the Direction sub-menu to turn easing on or off for the starting and ending points, then use the Speed sub-menu to adjust the subtlety of the effect. If you build a motion path and later decide you want it to travel in the opposite direction, select Reverse Path Direction. Motion paths support relative starting points, meaning 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. Just choose Relative Start Point. New in Storyline 360, you can now change an object's orientation as it travels along a non-linear motion path so it's always facing the direction it's moving. Just click Orient Shape to Path. Fine-Tuning Motion Path Animations Create perfect motion paths easily in Storyline 360 with selectable start and end points, precision snapping, size and position controls on the ribbon, and other enhancements. See this article for details. Copying Animations from One Object to Another Need to use the same animations on several objects? Save time by copying animations from one object to another with the Animation Painter. Select the object that has animations you want to copy. Go to the Animations tab on the ribbon and click Animation Painter. Click another object to apply the animations to it. Tip: If you need to apply the same animations to multiple objects, click the Animation Painter twice to keep it turned on. When you're finished, click it again to turn it off or press the Esc key on your keyboard. Animating Grouped Objects and Answer Choices To individually animate the items in a grouped object or block of answer choices: Open the timeline. Click the triangle beside the grouped object or block of answer choices to expand it. Apply animations to each item separately. Making Animations Accessible Ensuring your animations are accessible to all learners—regardless of their ability—is critical. Here are some tips for designing accessible animations: Give learners the option to turn animations off. For example, you could use a true/false variable to track whether a learner wants to see animations. Then, depending on the learner's choice, a layer with animations or a different layer without animations would appear. Avoid unnecessary animations; don't depend on animations and color alone to convey information. Don't use animations that move the foreground and background at different speeds. When you choose to use emphasis animations, you can use the Effect Options drop-down arrow to select a low level of motion for improved accessibility. Keep the duration of animations to less than five seconds. You Might Also Want to Explore: Syncing Entrance and Exit Animations Syncing Motion Path Animations Understanding How PowerPoint Animations and Transitions Are Imported899Views0likes0CommentsStoryline: Company History Carousel
Go back in time with this history carousel interaction. You can swap out the images and edit the fonts and colors to match your company’s brand or to tell your own story. Explore this project. This template will work for folks using Storyline 360, the continuously updated version of Storyline included in Articulate 360. Want to try it out? Get a free trial of Articulate 360 right here.499Views1like41CommentsGIFs 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.400Views0likes28CommentsStoryline: Motion Menu
This animated menu is a great way to catch your learner's eye and keep them engaged. Check out the gif below for a sneak preview of this Storyline template*. *This template will work for folks using Storyline 360, the continuously updated version of Storyline included in Articulate 360. Want to try it out? Get a free trial of Articulate 360 right here.399Views2likes27Comments7 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.399Views0likes9Comments