Storyline: 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:380Views1like12CommentsStoryline 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 Imported299Views0likes0CommentsHow 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.101Views0likes22CommentsStoryline 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: 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.) Tips: You can also apply transitions toslide mastersandfeedback masters. Some transitionsdon't work when viewing HTML5 output in Internet Explorer or Microsoft Edge.100Views0likes0CommentsStoryline: 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.99Views0likes41Comments