Forum Discussion
Emphasis Animations in Articulate Storyline
E-Learning Challenge #449 invited participants to explore how emphasis animations can be used to grab learners' attention. Inspired by a YouTube video from David Anderson, the idea emerged to create a custom drag-and-drop interaction—with a twist.
The interaction revolves around sorting statements about Articulate Storyline by dragging them onto either a Correct or Incorrect target. Instead of relying on Storyline’s built-in drag-and-drop functionality, a manual approach was chosen to gain full control over the learner experience. This allowed for tailored feedback and smoother interaction design.
Custom Feedback with a Purpose
The interaction was designed to provide clear and engaging feedback for both correct and incorrect actions—going beyond standard Storyline settings.
When a statement is dropped incorrectly, a sequence of triggers is activated. The statement smoothly returns to its original position, while a feedback layer appears, featuring a subtle Teeter animation to highlight the mistake. After this visual cue, a move animation reinforces the action before the layer hides itself, allowing the learner to continue without disruption. This approach replaces traditional, intrusive pop-up messages with a more fluid and intuitive correction, keeping learners engaged without breaking their focus.
For statements dropped correctly, a small piece of JavaScript was used to enhance the experience. This script triggers an effect where the dragged item fades out and shrinks, creating a smooth "disappearing" animation, as if the statement seamlessly integrates into the correct target area. This subtle visual confirmation reinforces success in a non-disruptive way, allowing learners to stay in the flow of the activity.
By combining Storyline’s native tools with lightweight JavaScript and GSAP animations, the feedback feels dynamic, intuitive, and polished. Every response is designed to guide rather than interrupt, offering a more modern and engaging learning experience.
Going Beyond the Built-In
Building this interaction showcased how animation, when used thoughtfully, can enhance learning without overwhelming the user. Instead of interrupting progress with static messages, motion was used to inform through visual cues, keeping the flow natural and responsive.
This project highlights the value of stepping beyond default settings in Storyline to craft experiences that are both functional and engaging. Subtle animations, combined with strategic triggers, can make a significant difference in how feedback is delivered and received.
Final Thoughts
Exploring emphasis animations in this way opened up new possibilities for creating more dynamic and learner-friendly interactions. It's a reminder that small design choices—like how feedback is presented—can have a big impact on engagement and retention.
Want to Try It Yourself?
You can preview the interaction here to see it in action.
If you'd like to explore how it was built, I’ve also made the full project available as a free download. Feel free to dive in, tweak it, and make it your own!
About me:
Paul Alders
9 Replies
This is a great design Paul! I'd like to learn to use Javascript and GSAP and this example helps to see it in action. Thank you for sharing the file!
I’ve actually been using an app to learn JavaScript—not specifically for Articulate Storyline, but more to build a solid foundation. It really is like learning a new language, but it feels manageable since we already work with concepts like variables and triggers. I highly recommend an iOS app called Encode—it lets you practice as you learn, which makes it stick.
Also, Paul—just wanted to say I really love the design you shared. I’ve saved it for future reference, especially as I continue learning JavaScript. I’m just getting started, but I find it absolutely fascinating. Thanks so much for sharing! 😁
That's a great tip Jesi, I'll check that app out!
Thanks Cyd, there are moments that knowing the basics of JavaScript and GSAP can be very helpful. Here is a link to an online course from Jeff Batt A great course for developers like us who want to use JavaScript and GSAP in Articulate Storyline.
Thanks Paul--appreciate the recommendation on the course from Jeff Batt. I imagine his is focused on people who use it in our field.
When one uses more JavaScript and GSAP in courses, is there more chance for a course to not operate properly over time?
Thank you for sharing! I tried navigating this using a keyboard, and I could not. Could you please advise?
