Animation

71 Topics

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.
CommunityTeam
8 years ago Place Articles
5.9KViews
0likes
29Comments
Storyline 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 an example. 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 Imported
KatieRiggio
10 years ago Place User Guides
3.9KViews
0likes
0Comments
Using Morph Transition Effects in E-Learning #501
This week, your challenge is to share an example of the Morph transition and demonstrate how it can be used in e-learning. You can use either Storyline or PowerPoint for your example.
DavidAnderson
6 months ago Place E-Learning Challenges
3.8KViews
0likes
1Comment
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.
SarahHodge
6 years ago Place Articles
2.1KViews
1like
9Comments
Using Emphasis Animations to Grab Learners' Attention #449
Using Emphasis Animation in E-Learning #449: Challenge | Recap What moves, gets noticed. And if you've worked in Storyline 360 recently, you likely noticed some movement in the Animations tab on the ribbon. Just like in PowerPoint, Storyline's new emphasis animation effects offer fresh ways to guide attention and highlight on-slide elements. You can apply them to pretty much anything – shapes, images, buttons, characters, markers, text boxes, even videos. So whether you’re trying to grab your learner’s attention or prompt them to touch the screen, emphasis animations can help learners focus on what’s important. And that’s what this week’s challenge is all about. 🏆 Challenge of the Week This week, your challenge is to show how Storyline 360's new emphasis animations can be used in e-learning. Your example can be a simple button starter kit showcasing the new animation effects, or you can create a more complete or polished. NOTE: Even without an active Articulate 360 subscription, you can participate in this week's challenge. For example, PowerPoint's emphasis animations give you similar functionality. 🧰 Resources Storyline 360: Emphasis Animations Storyline 360: Adding Animations Triggering Motion Paths Based on Learners' Actions Emphasis Animations Beta Feedback: Share your feedback, report a bug, or tell us how you’re using the new animations. ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on x or LinkedIn, try using #ElearningChallenge so your peeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: To help you build momentum for this week’s challenge, check out the growing list of tabs interactions your fellow challengers shared over the past week: Tabs Interactions in E-Learning RECAP #448: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 📅 Next Week’s Challenge Challenge #450 (02.16): Using Themes, Templates, & Slide Masters. Another basics challenge, only this week we're looking at under-the-hood features to help us work faster in Storyline 360 and PowerPoint. Rise 360 users can show their before-after examples using themes and block templates. 🚨 Contact Information Just a quick heads up – if you want your blog, website, or LinkedIn included in our recap posts, could you do me a favor and add or update those links onto your ELH profile sometime this week? I found some broken links last week when I pulled the recap together. You spend a lot of time building creative examples, and your work deserves all the attention it can get.
DavidAnderson
2 years ago Place E-Learning Challenges
1.7KViews
0likes
110Comments
5 Ways to Use Morph Transitions
View the example For my example this week, I decided to practice a few simple techniques using the Morph transition. Progress bars Text and title transitions Showing character dialogue or conversations Image carousel effect An office exploration Production Tips For the image carousel, the process was pretty straightforward and much easier than using multiple motion paths with reverse paths like you’d normally need. The main challenge was just keeping the images aligned on each slide. I used Storyline's guides initially to align the objects but a few still felt off so I manually verified (and updated) each object's position using the the Size and Position window. I attached the source file so you can see what I did. About Me Connect on LinkedIn: David Anderson
DavidAnderson
6 months ago Place Morph Transition Examples in E-Learning RECAP #501
1.6KViews
20likes
16Comments
Storyline 360: Adding Transitions to Slides and Layers
Storyline 360 has a library of transitions to give your slides and layers a professional touch. When used strategically, transitions can even convey a sense of movement, pace, and direction. Adding Transitions In Slide View, select the base layer or a supplemental layer in the Slide Layers panel. Go to the Transitions tab on the Storyline ribbon and choose a transition from the gallery. Note that Push and Uncover transitions aren't available for layers. You can choose the direction of most transitions. Select your choice from the Effect Options drop-down. Adjust the speed of your transition by entering a time (in seconds) in the Duration field. To use the same transition elsewhere, click Apply to All. If you're on the base layer of a slide, it'll apply the same transition to the base layer of all other slides in your course, including slide masters. If you're on a layer, it'll apply the same transition to all other layers for the current slide. (You can apply different transitions to different layers on the same slide, if you'd prefer.) Tip: You can also apply transitions to slide masters and feedback masters.
KatieRiggio
10 years ago Place User Guides
1.6KViews
0likes
0Comments
How Can You Use This Motion Path Tip in Your E-Learning Projects? #445
Using the 0px Motion Path Trick #445: Challenge | Recap Happy New Year, E-Learning Heroes This week's challenge is a bit off the beaten path compared to what we usually do. Instead of diving into a popular feature (sliders, dials, variables) or a common interaction (tabs, timeline, accordion), we're zooming in on a more unique, lesser-known use of a feature. Think of this as a sandbox challenge. Check out this example and see what I mean. Sugary Drinks by Annabelle Grew Why is this interesting? Aside from the creative concept and visual design, what really grabbed my attention here is the approach Annabelle took to put this whole project together. Typically, drag-and-drops are set up with just a fixed number of draggable objects, right? That's perfectly fine if you're dealing with, say, under ten items. But here's where it gets juicy: imagine you've got dozens of objects, and you want them all to be draggable. Now, the standard move would be to create individual objects for each drag item. But let's face it, this method works, but it can make editing and managing the slide a real challenge. That's why knowing your tools can really help save you time and work quicker. How does it work? There's only one drag object in the project. The drag cube has a motion path with a length of 0 px and a duration of .10 seconds. Each time the sugar cube is dropped on the target, the trigger tells the sugar cube to move its motion path. Because the motion path is set to 0 px, it resets the sugar cube to its default starting position of the sugar cube. Brilliant, right? It's not just about what you create but how you create it that can make all the difference. And that's what this week's e-learning challenge is all about! 🏆 Challenge of the Week This week, your challenge is to share an example that uses the 0px length motion path trick. You can recreate an existing example or play with ideas that show potential uses for this technique. Two More Examples Reset an Object's Position In this example, Ron used the 0 px motion path in a way that's not just about duplicating objects. Instead, it's used to play multiple audio clips from multiple objects. The 0 px motion path resets the object's position after the learner drops the object on a single target. Ron's got a detailed forum post where he breaks down how he built his project. Casualty Incident Response by Ron Katz Drag-and-Drop RAID Storage Calculator I put together this example nearly five years back, right around the time we kicked off our online webinars. I've always been a fan of Drobo and especially liked their interactive capacity calculator. The project file is available for download and if you want to see how it works. Drag-and-Drop RAID Storage Calculator Video Tutorial of the 0 px Motion Path Technique ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Year's Challenge: Before you tackle this week’s challenge, check out the colorful examples your fellow challengers shared in last year’s Pantone Color challenge: Pantone Color of the Year 2024 RECAP #444: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.
DavidAnderson
2 years ago Place E-Learning Challenges
1.5KViews
0likes
112Comments
Creating Animated Button Styles and Effects in E-Learning #285
Animated Buttons in E-Learning #285: Challenge | Recap Animated button effects are one of the best ways to prompt learners to touch the screen. From animated submit buttons to the despised next button, there are countless designs, styles, and effects to choose from. You can pack a lot of engagement into three basic states: How to Create Animated Button Effects in Storyline 360 By default, animations can’t be added to existing states. To enable animation effects, you first need to add an extra shape to the state you want to animate. If this sounds confusing, don’t worry. I recorded a quick video to show you everything you need to know. View the tutorial on YouTube Animated Button Example and Practice Slide Here’s a simple example to help get you started. I included a practice slide with ready-made shapes that you can use to practice adding different animation styles. View the example | Download the source Using Animated Button Effects with Characters Guess what? You’re not limited to using the animation effect on buttons. The technique works really well when you want to create subtle or soft transitions between object or character states. Here’s a good example of how animated states works with characters in Storyline 360. View the example | Download the source When you check out the source file, you’ll see the timeline example doesn’t use the animated states effect. The animation effects are created by applying entrance and exit animations to multiple characters on the slide. This is a good example of where it’s easier to create and manage everything on the timeline rather than adding the animation to each state. Challenge of the Week This week, your challenge is to show one or more examples of animated button effects. Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work. Using Storyline for this week’s challenge? Please consider sharing your .story files. Button graphics make popular giveaways and the source files will help a lot of users get up to speed with more advanced button concepts. Not using Storyline? No problem! You can mock up your 3-state buttons designs in PowerPoint or any other tool. I'm mostly interested in seeing your creative button ideas. How are Animated Button Effects Used in E-Learning? Animated Button Effects #89: Challenge | Recap Looking for more ideas and source files? Check out the creative examples shared in our first animated buttons challenge. The challenge is almost five years old but the examples are still amazing. Resources The Ultimate Guide to Buttons in Storyline 2: Fantastic resource on using buttons in Storyline 2. Tips for Creating Great Buttons That Stand Out: Bookmark this article for tips on common button characteristics and ideas for creating engaging buttons. E-Learning Icons: Show and Share Your Favorite Styles #78: Icon challenge with some great tips and examples for creating your own graphics. In Defense of Eye Candy: Great article that makes the case for design and beauty in web interfaces. The same research applies to the types of graphics we build in e-learning. Articulate Training Webinars Tom recently hosted a training webinar that shows you everything you need to know about creating animated buttons in Storyline 360. View the Articulate Training webinar recording Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dive into this week’s animated button challenge, check out the interactive ADDIE examples your fellow challengers shared over the past week: Using the ADDIE Model in E-Learning #284: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
DavidAnderson
6 years ago Place E-Learning Challenges
1.4KViews
0likes
211Comments
Using Circle Menu Navigation in E-Learning #406
Using Circle Menus in E-Learning #406: Challenge | Recap Circular menus are a great option when you want to provide users with an intuitive and stylish way to present navigation options in a compact format or when screen space is limited. By using a circular layout, designers can present a large number of options in a compact space without cluttering the screen. This makes circle menus an ideal choice for apps (or e-learning courses) with a lot of features or options that need to be easily accessible to users. Let’s explore a few examples. Circle Menu Navigation In this example from Dave LeFevre, learners click the menu button to reveal the circular arrangement of menu options. View the example | Download the source Circle Menu with Masking Effect In this example from Montse, a folder graphic is used as the starting point for the menu options. I like how the folder graphic was layered to mask the animated menu items. View the example | Download the source file Circle Menu In this example, Jackie’s circle menu features menu items nested under the starting button. In addition, I like how the menu features a selected state that remains persistent even after the menu is closed. That’s a nice touch. View the example | Learn more about this project Challenge of the Week This week, your challenge is to create a circle menu example to show how they can be used in e-learning courses. Your example can be static or animated. In most cases, animated menus will require variables. If you need help or get stuck this week, jump into the forums and let us know. Related Challenge For more ideas of what's possible, check out challenge #189 and the recap post. Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. Last Week’s Challenge: While you’re looking over this week’s challenge menu, take a few moments to check out the interactive audio examples your fellow community members shared over the past week: Interactive Audio in E-Learning RECAP #405: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. Next Week’s Challenge Next week's challenge (3/4/23): New Feature Challenge: Microlearning in Rise 360. With the new microlearning feature in Rise 360, you can create bite-sized, single-objective training easier than ever. See this user guide article for more on this new feature. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.
DavidAnderson
3 years ago Place E-Learning Challenges
1.4KViews
0likes
266Comments