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 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 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.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 alength of 0 pxand 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 to0 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 the0 px motion pathin 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 adetailed forum postwhere 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 ouronline webinars. I've always been a fan of Drobo and especially liked their interactivecapacity 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 2024RECAP#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.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 CreateAnimated Button Effects in Storyline 360 By default, animationscan’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 videoto 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 howanimated statesworks 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 makepopular 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'mmostly interested in seeing your creative button ideas. How are Animated Button Effects Used in E-Learning? AnimatedButton 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.Using Animation Techniques to Create Countdown Timers in E-Learning #298
Animated Timers in E-Learning #298: Challenge|Recap Timers are a common element in game-based learning where time constraints play a role in the success or failure of a task. Timers can be used formost decision-making activities that require learners to quickly process information. Animated timers can be used to: Create a sense of urgency, tension, or pressure Simulate real-world tasks that involve time constraints Gamify decision-making activities Create timed skill and drill exercises Timers can be created using a variety of techniquesincluding video clips and basic entrance animations. The best part is that timers can bevisually themed to align with your course content. Let's look at a fewexamples: Card Match Game Try your memory in this card matching game from Richard Hill. First shared in thememory game challenge, this game features ananimated timerthat puts learners under pressure to complete the puzzle. View and download the timer in action Wait! How’d he do that? The effect was created using Storyline’s wheel entrance animation and a 35-second duration. Using alonger duration, the entrance animation creates the visual countdown effect. Brilliant! One Creative Timer Begets Another Following up in the samememory game challenge, community memberRidvan Saglamused a similar technique for his airplane countdowntimer. I really like the way hevisually connected the design of his timerto the theme of his game. Ridvan shared a fewmore visual timers that you candownload from this discussion thread. Using Timers to Gamify Existing Slides Here’s an example thatAlexander Salasshared for aprevious challengewhere he took an existing template and gamified it by adding a simple countdown timer. You candownload his source fileand use that as a starting point for this week's challenge. View and download the timer Using Video Clips as Timers Animated timers can even be created with simple tools like PowerPoint. In this example, Tracy Parishcreated an animated loading bar effect in PowerPoint.Using a screencasting tool, she recorded the animation as it played back. Learn more and download the source file Because Storyline has a trigger to evaluate when awhen a media clip completes, the video’s duration becomes the timer. Challenge of the Week This week, your challenge is to share an example that demonstrates how animated timers can be used in e-learning. NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on. Last Week’s Challenge: Before you put the time squeeze on your learners, check out the interactiveTour de Franceexamplesyour fellow community members shared in last week's challenge: Tour de France Interactive ExamplesRECAP#297:Challenge|Recap New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build youre-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos.27 Ways Course Designers Use Emphasis Animations in E-Learning #449
Emphasis Animation Examples RECAP #449: Challenge | Recap This week’s challenge asked course designers to show how emphasis animations can be used in e-learning. Jonathan Hill I began experimenting with Articulate's new emphasis animations in last week's Tab Interaction challenge. This week, I've used them in a much 'louder' way to bring this drumming simulation to life. Hopefully, you'll also notice the more subtle use of emphasis animations to highlight your correct/incorrect choices during the 'configuration' test. Example| Jonathan Hill | Website | @DevByPowerPoint Jodi M. Sansone I was tempted to over-use these new animations. I applied the pulse animation for audio emphasis and to indicate animal sign selection, used shake for swinging lanterns, and created a Lunar New Year palette featuring Pantone Peach Fuzz, complementing traditional reds and golds. Example | Jodi M. Sansone | Website | @jodimsansone Maren West Example | Maren West Example | Maren West Amy DeMarco Inspired by my toddler's fascination with aquatic animals, I crafted an engaging pond scene. I can't wait to see everyone else's projects! Example | Amy DeMarco Stephanie Hanes Sharing three ways to "stop and smell the flowers" while at work! Example | Stephanie Hanes Jayashree Ravi In my project, I've brought the famous Aesop tale of the Hare and the Tortoise to life with captivating animations. Example | Jayashree Ravi Phil Mayor This is a first draft and is a little buggy. It has emphasis animations in addition to other animations to emphasize elements of the game. Example | Phil Mayor | Website | @philmayor Thierry EMMANUEL I use emphasis animations for position crosses (impulse), for correct/incorrect drop zone states (shrinking/expanding), and to animate parts of the mechanism (impulse, shaking, oscillations), plus circular trajectories, plus a dial that moves when its variable changes. Example | Thierry EMMANUEL | Website Hannah Radant This week I included emphasis animations on my button choices, but I also tried using emphasis in my TTS by using the SSML that Articulate has available. Example | Hannah Radant | Website Michael Schleicher I uploaded a job task sequencing template for this challenge. Emphasis animations enhance learner feedback, making it ideal for introducing new content. Example | Michael Schleicher Jonathan Hill I've used motion paths with video before, but these emphasis animations provide more thrilling opportunities to combine video and motion. Example | Jonathan Hill | Website | @DevByPowerPoint Joanna Kurpiewska Here's a quick and simple interaction that mixes motion paths and emphasis animations. This could work as a mini-menu, original tabs interaction, or a click-to-reveal feature. Example | Joanna Kurpiewska | Website | @elearningjoanna Julie BIGOT A little game of logic. You need to find all the items needed to brew your first potion! Use the clues to find out where each item is located. I used all the emphasis animations: teeter for the steps in the first slide pulse to show the different items (when I give the list) grow and shrink for the items you drag and drop shake when you drop an item in the wrong spot Example | Julie BIGOT | Website Thaddaeus Smith For this challenge, I incorporated grow, shrink and pulse emphasis animations with a dial to create an interaction that allows the user to learn about eight different culinary mushrooms. I'm a big mushroom fan, and even forage for chanterelles in the Pacific Northwest. Example | Download | Thaddaeus Smith | Website Fabienne Werder Inspired by the labeled graphic activity in Rise, I created a similar one in Storyline using shapes, entrance/exit animations, triggers, and timelines, prior to the introduction of emphasis animations in Storyline. I adapted my previous version and created a second version using the grow-and shrink-emphasis animations. Example | Fabienne Werder Madison Bales My sample is a combination of last week's challenge, tab interactions and this week's emphasis animations. I used the emphasis animations to reduce the amount of microcopy on the screen and encourage the learner to read the ingredients of certain foods while learning how to identify processed foods. Example | Madison Bales Ilona Winnemore It was nice to get creative this week, and I made a small onboarding refresher game, “Orange Grove Onboarding.” Example | Ilona Winnemore | Website Mike Enders I decided to put Storyline to the test to see how it could handle oodles of emphasis animation triggers. Throw in some random variables and a timer and you have a project that's good for absolutely nothing, but it sure was fun to build. And Storyline handled it all marvelously! Example | Mike Enders | Website | @endersdesign Laura Hansen Here is a storyline interaction I created about hooking learners. I used the emphasis animations for the hover state to encourage clicks and bring an image to life on the last slide. Example | Laura Hansen Courtney Roberts The first thing that popped into my head when I saw the new "shake" animation was the line from James Bond movies, "shaken, not stirred", so naturally I had to do a James Bond-themed project. I used the new emphasis animation names in some ChatGPT-generated, James Bond-style, advice on job searching and emphasized them accordingly. (The word "stirred" is emphasized with both Teeter and Pulse.) Example | Courtney Roberts Wrenn Corcoran I really focused on three things with this challenge: 1) exploring the emphasis animations, 2) combining the emphasis animations with motion paths to see what effects I could get, and 3) playing with sound. Example | Wrenn Corcoran Amy Swagger I love the addition of emphasis animations. I enjoyed creating this fun, light-hearted Valentine's Day Quiz to learn more about them as well as explore different prompts in ChatGPT that helped provide the text. Example | Amy Swagger Nhlamolo Moja Example | Nhlamolo Moja Kate Golomshtok Example | Kate Golomshtok | Website Ron Katz This is a game, similar to Simon or Dance Dance Revolution. You have 30 seconds to get the highest score. Try using the clicking method or the keypress method to see which is most effective. Example & download| Ron Katz | Website Sneha Sivaprakash Example | Sneha Sivaprakash New to the E-Learning Challenges? The weekly challenges are ongoing opportunities to learn, share, and build youre-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I'll update the recap posts to include your demos. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include#ELHChallengeso your network (and Articulate!) can track your e-learning coolness. Share Your Emphasis Animation Examples! The emphasis animation challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.
