Flip animation using GSAP in Articulate Storyline to have smooth flip animation.
We recently faced a challenge with the built-in swirl animation in Storyline (SL). Our client found it cluttered and pointed out that the animation flipped twice, which logically should result in showing the same side again. We agreed with this feedback and decided to explore alternative solutions. After some research and experimentation, we discovered that using GSAP (GreenSock Animation Platform) provided a much cleaner and more logical flip animation. GSAP allowed us to create a smooth and visually appealing flip effect that only flips once, addressing the client's concerns effectively. By integrating GSAP with Storyline, we were able to enhance the overall user experience and meet the client's expectations. This solution not only resolved the issue but also opened up new possibilities for creating more sophisticated animations in our e-learning projects. Hope it will be helpful..An audio on/mute button controlled by JavaScript
I have been using an on/off toggle button on all my eLearning slides to allow the learner the option of turning off the sound. I thought I'd show how this works in case others need an on/off button for the audio track. Without sound, the content is delivered exclusively from slides or in the Notes. Turning off the sound allows the learner some control of their experience, such as if they don't want the sound playing in an office environment. I have been using a snippet of JavaScript that I found on e-learning heroes forum somewhere. I can show you what it does, and how to trigger the snippet, but I've no clue how it works on a JavaScript level. I have two ways to toggle the audio on/off. One is by clicking a button at the top of the screen. The other is through the key combination Control-Alt-M (which you can set up). Having a key combination is ADA compliant for sight-challenged people (they don't need to click on something). I created the variable varAudioOn and set it by default to true, so the audio plays whenever the course starts until it gets turned off. I created an audio button (Insert > Button) with 3 states, one is the speaker symbol and the others with a line through the speaker or a "down" state. This is called the "Audio button" object and is the same on all slides. Place your button where you want it before setting up the JavaScript trigger. I highlight the button object in the timeline and use the Size and Position controls to move it precisely. It seems that when adding the JavaScript trigger, the Audio button cannot be dragged onscreen, just positioned with Size and Position. [By the way, I believe I chose not to set this button up on a Master slide because I think JavaScript won't run when the Audio button "lives" on a Master slide. That seems like a logical choice so you don't have to copy it over and over, but t just wouldn't work for me. So I put it instead on all my slides as an object with 3 states.] Wait until your JavaScript triggers are hooked up (i.e. typed out in Triggers) before copy/pasting, so the triggers will copy along with the object. In the Triggers, I first had each slide check the status of the audio button when the slide begins, and then set the correct state or appearance of the button. Here's the logic: 1) If the audio was "on" for the previous slide, it should be audible on this one. 2) If the audio button state was in the OnState, then make the "Audio button" state on this slide to show the "on" state. 3) If the audio state on previous slide was "normal" = off, then show the off-state as this slide begins. I also have a trigger to start the audio after .5 seconds on every slide. For controlling the varAudioOn variable, I have these trigger sets: After these triggers, there's the usual two triggers (not shown) for moving to the next slide with Next and the previous slide with Previous. Inside the "Execute Javascript" (click on this link) you'll find this Javascript snippet that toggles the audio from audible to mute and back. //mute/unmute // Use the global DS object if it exists, otherwise try require: varappState = window.DS ? DS.appState : require("helpers/appState"); appState.onToggleVolume(); Hope this is useful to somebody. It took me many weeks to figure this out.Collection of Carousel Templates
Some experiments! Hope this gives you some inspo. Vertical Sliding Interaction (Light): Preview Notes: Uses hover layers which don't work on mobile. Features: Two options for vertical progress bars, swipe forward and back animations Horizontal Swipe Interaction (Dark): Preview Notes: Uses hover layers which don't work on mobile. Features: "Dot" progress animationsFrom Motion Paths to Murder Mysteries: My 2024 E-Learning Adventure
When I started 2024 with a simple 0px motion path challenge, little did I know I'd end up orchestrating murder mysteries and guiding virtual safari adventures! What began as technical experimentation became a year of pushing creative boundaries and discovering new possibilities in e-learning design. Each challenge became a stepping stone to something more ambitious. From helping art lovers restore masterpieces in a forgotten gallery to creating an AI-powered pet adoption center, every project taught me something new. I found myself weaving stories, building immersive experiences, and even launching my own spooky podcast platform (Jay-tify, anyone?). Here's my journey through 2024's e-learning challenges, where every project started with "What if..." and ended with "Wow, I actually did that!" Challenge #445: How Can You Use This Motion Path Tip in Your E-Learning Projects? My first adventure began with "Guess Your Monthly Hydration," where I explored the innovative 0px length motion path technique. Drawing inspiration from David and Andreas Fischer's work, I created an interactive experience that made learning about hydration engaging and fun. View My Entry Challenge #447: Spotlight Masking Effects for Discovery Activities In "Ruined Gallery Adventure," I transformed learners into art enthusiasts exploring a forgotten sanctuary. Armed with just a torchlight, they discover and restore hidden masterpieces, bringing art back to life. This project combined technical masking effects with storytelling to create an immersive learning experience. View My Entry Challenge #448: Using Tabs Interactions in E-Learning Who says learning can't be delicious? I cooked up an interactive feast featuring 8 mouth-watering Indian recipes, all organized behind interactive tabs. This project combined my love for cooking with interactive design. View My Entry Challenge #452: Show How You're Using AI to Create E-Learning Courses Stepping into the future, I created the AI Pet Adoption Center. This project showcased the power of combining ChatGPT for content, Midjourney for lifelike pet images, and WellSaid Labs for natural AI voiceovers. View My Entry Challenge #454: Using Text, True/False, and Number Variables Talk about pressure! In this challenge, I created a high-stakes "Bomb Defusing Challenge" where learners must decode and make split-second decisions. It's amazing how variables can create such intense learning experiences! View My Entry Challenge #455: Asking vs. Telling: Creating Interactive E-Learning I tackled the age-old push vs. pull dilemma in e-learning through an innovative onboarding experience. By comparing traditional slides with interactive branching scenarios, I demonstrated how engagement can transform learning about company values. View My Entry Challenge #456: How Are Designers Using Phat Fonts in E-Learning? Who says fonts can't be fun? I created a spooky haunted mansion course where chunky fonts became part of the adventure, proving that typography can be both functional and entertaining. View My Entry Challenge #457: Mix and Match Your Own E-Learning Challenges A dream came true with this one! I finally brought my long-awaited murder mystery to life, combining elements from seven different challenges. This project showcases how different techniques can come together to create something truly unique. View My Entry Challenge #461: Audio Interviews with E-Learning Challenge Heroes Introducing Jay-tify! I created a simulated podcast platform where I shared my insights about participating in these challenges. It was a unique way to reflect on my e-learning journey. View My Entry Challenge #467: Creating Immersive Learning Experiences with 360° Images Ready for a safari? I took learners on a virtual animal adventure, proving that immersive learning can transport us anywhere. View My Entry Challenge #469: How I Became an E-Learning Instructional Designer I shared my personal journey from a Computer Science graduate in Chennai to a Learning Designer in Singapore, reflecting on a decade of growth and transformation in the field. View My Entry Looking back at these challenges, I'm amazed at how each one pushed me to explore new possibilities in e-learning design. From technical challenges to creative storytelling, from AI integration to immersive experiences, 2024 has been a year of growth, learning, and endless creativity. Here's to more adventures in 2025!
