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 AndersonInteractive Markers on a Car
Version 1 I saw this nice Polestar ad on my phone that had markers and labels that I thought I'd test with the morph. I I tried a few things: Create a slide with all of my elements. Add triggers to slides (need to change them after duplicating) Since the morph is only a transition between slides and I wanted all of my objects to transitions in and out the ones I wasn't using a made transparent. I think all of these "hidden" objects via transparency may be problematic. :) Attached is the file. Version 1: View demo Version 2 I tried a few novel things in version 1 that may have confused Storyline, so I simplifed the demo in version 2. Version 2: View demo. About Me I love helping people learn to use the Articulate software to meet their needs at work. I especially like to help those new instructional designers who are trying their best to get a handle on things. I regularly contribute to the training team's blog where we assemble all sorts of tips and tricks. Follow it to stay up to date. I post every Wednesday to Articulate's company blogwhere I share more general instructional design tips. I used to write the Rapid E-learning Blog. Still lots of good tips & tricks in there. Connect with me on LinkedIn and follow my YouTube for more tips & tricks.Meet the New Morph Transition in Articulate Storyline
As an e-learning developer, you know how important smooth, engaging transitions can be. That’s why I’m excited about Articulate’s latest update: the brand-new Morph transition for Storyline! Morph brings a whole new level of polish to your slides by intelligently animating objects from one state to another. Instead of abrupt jumps or simple fades, you can now create fluid, professional-looking animations that feel almost cinematic. Whether you're moving shapes, text, or images, the Morph transition automatically calculates the movement, scaling, rotation, and even color changes — saving you tons of manual animation time. It’s perfect for storytelling, demos, onboarding courses, or anytime you want to wow your learners with seamless visual flow. To explore the new feature, I developed a short demo showcasing what Morph can do. The demo is inspired by three Morph transitions originally created in Microsoft PowerPoint that I discovered online and features an animated intro slide, a dynamic animation of a deck of cards, and a smooth circular text animation — all created using the new Morph transition. While it’s exciting to see how much creativity this new feature unlocks, I did notice that the Morph transitions aren't quite as smooth yet as the PowerPoint version. These kinds of hiccups are common for new features, and I’m sure the Articulate development team is working hard to smooth out these tiny issues. All in all, I can’t wait to start using Morph in my projects — and I’m even more excited to see what you create with it! Have you tried it yet? Let me know what you think! You can preview my demo via the link below, or download the source file to explore the build details. Preview my demo Download the source file Note: In the demo, I’ve used some circular text. This text was created in PowerPoint. If needed, you can download the PowerPoint file hereMorphing? Why not!
I have to say, the morphing transition is pretty cool. I hadn’t really played with it before this challenge came up, but it’s been a fun learning experience. It definitely takes some time to get comfortable with — and even more time to really master. Like any feature, it has its ups and downs. One thing I noticed is that it doesn’t always behave consistently. That said, I’m holding off on calling it a bug until I’m sure I’m not just using it wrong (which is totally possible). I’ll keep experimenting with it whenever I have some spare time. So far, I’ve managed to put together a few simple examples. I’m guessing most of us have approached this in similar ways, so I won’t go too deep into the how-to. Example 1: Europe Example 2: Drinks Example 3: ZermattMindfulness
What do you do when your brain hits a wall? This project explores small, mindful actions to help you reset and reconnect. I used a soft pastel palette and flat icons to create a simple interaction where each tip gently morphs into view. The visual transitions are built around consistent layout and position changes to simulate a calm, flowing experience—no motion paths, just smooth shifts from one moment to the next. 🔗 View the Demo About Me Jayashree Ravi Curious about more e-learning innovations? Connect with me on LinkedIn to share ideas, discuss implementation techniques, or simply chat about instructional design challenges.Animated Menus Using Morph Transitions
When I first saw the morph transition, I didn’t think much of it. The fade has always worked just fine. But after seeing what Elizabeth and Thierry did with it, I got it. For this challenge, I reworked a menu example I originally built with motion paths and variables. Motion paths are easier in Storyline now, but they still take time to set up when you're duplicating and reversing the paths. Same with variables. They're easy to copy and tweak, but also easy to mess something up and lose your time troubleshooting. But with the morph transition, it’s two slides. Move the objects where you want them on each one, and you're done. View the exampleGuide to a Healthy Lifestyle: Nourish, Move & Mind
Experience it I recently saw an interactive e-learning example in a Mastercard and really liked how it embedded lots of info in a simple, clear way. It inspired me to try something similar—organising content into smaller, engaging chunks that are still meaningful. I thought of healthy habits right away—it’s a topic anyone can relate to, and some ideas immediately popped into my mind. Learning Goal & Audience Goal: Share the three basics of wellness—nutrition, exercise, and mindset—in a quick, engaging, and friendly format. Audience: Anyone looking for small ideas to improve their daily wellbeing. Concept & Structure I set it up as a three-tile menu: Eating Habits, Physical Activities, and Mental Health, each including key subtopics, brief explanations, a "Did You Know?" feature, and simple definitions to keep the content light but informative. The structure is flexible—you can easily scale the number of tiles, tabs, or content items based on your learning goals or time constraints. Visual & Interaction Design I used soft colours like blues, yellows, and purples to give it a calm and positive feel. I also added light background animation and small object movements to make the screen feel more alive without being distracting. Development & Triggers Each tile links to its own layer on a separate slide. I used buttons and triggers to keep everything smooth. Motion path animations were added to the pop-ups so they slide in nicely when opened. Tools Used Illustrator for the graphics Vyond for simple animations Articulate Storyline for building everything and setting up the triggers Challenges & Solutions I started with custom motion paths but switched to built-in animations—they worked better and were easier to manage. I also made small fixes to the GIF and icon states after testing, just to make sure everything responded well. Outcome & Next Steps I’d be happy to share my process in more detail if it’s helpful—always glad to exchange ideas and learn together. Let me know what you think—I’d love to hear your feedback! ...and let's share, connect, and inspire: my LinkedinFixing Slide Positions For Drag Interactivity On Mobile Using JavaScript
Hey Heroes, I’ve recently been working on a number of client projects that really put the new JavaScript API in Storyline to good use! One challenge I had to overcome was how Storyline behaves on mobile devices. By default, it seems to add a slide-drifting transition when users swipe—great if you're building swipe navigation between slides, but not so helpful when users are meant to interact with objects on the slide itself. For example, trying to drag an object can instead cause the whole slide to shift, which can lead to some confusion and frustration. For this week’s challenge, I’ve put together a demo that showcases the solution I developed to disable this behaviour when needed. You can try out the project here: LINK Copy the JavaScript code snippet for your own projects: LINK I also recorded this video for YouTube showing the results:
