What’s Your Celestial Learning Persona
In this challenge, I used a listicle format inside a scroll panel to explore how the 12 zodiac signs connect to learning styles. Each sign reveals a short, scrollable insight into how that type of learner might thrive — whether you're a curious Gemini, focused Capricorn, or imaginative Pisces. Just scroll through the list and discover which celestial style speaks to you :) What’s Your Celestial Learning PersonaScenario Exploration
For this challenge I combined the pop-up effect with the morph transition from an earlier challenge that I missed. I thought using a pop-up to choose a character would be an interesting way to explore compliance scenarios. The morph effect worked well on static images (e.g., the background for my characters), but the morph is interrupted a little bit on the built in characters when the morph meets a state change in the character. https://jodisdemos.s3.us-east-1.amazonaws.com/502+Pop+Up+Morph/story.htmlTale of Two Tails
About the Project Curious about what makes dogs and cats so different? 'Tale of Two Tails' reveals their unique personalities through a simple yet colorful interactive comparison. See how effective comparisons can engage learners! #ELHChallenge500 Check out the demo here. About Me Jayashree Ravi LinkedInFeelings Pulse
This is an interactive experiment using poll-style questions within a video. It’s designed to describe emotions through colors and characters, using four simple questions. Each question is linked to a color — Red, Yellow, Blue, and Pink — and presents a few emotional choices for you to pick from. You’ll only be able to select one answer per question, and only once per session. Your response is saved anonymously and added to the overall results. At the end, you’ll see how others have answered as well. This isn’t based on any scientific research — it’s just a creative way to reflect on emotions and try out interactive video features. Thank you for being part of it. Feeling PulseACME Staff Selfies
Simple interaction where you can click on different managers to learn about them. For the pop out effect I decided to go with a selfie of each person and then used a morph transition to the information slide. I used use AI to generate the images and background and I used AI Assistant to generate the placeholder text. See the demo here. 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.Stop Child Abuse
Hello Heroes, This animation was originally intended for the previous challenge. However, because it holds special significance for me, I decided to share it in this landmark 500th challenge instead. The criteria for this challenge differ slightly from my initial plan, so I incorporated a data comparison feature that activates when the ELC counter reaches 500 and the 'Facts' image is clicked, ensuring alignment with the challenge requirements. This animation is dedicated to all children affected by violence in our world today. There are not many interactions for you here – only an invitation to watch until the end, enjoy a song, breathe deeply, and hold them in your thoughts. Like these balloons drifting through the clouds, may every child find peace unburdened, joy unchained, and the freedom to soar. Hope you all enjoy it as much as I did! ELC#500 - Stop Child Abuse Project Description: In this project, I leveraged the JavaScript API in Storyline alongside the Web Animations API to create dynamic, smooth animations for hot air balloons. This included continuous swaying effects with adjustable rotation and downward movement speeds for more lifelike movement. For elements like clouds and birds—which reverse direction once the ELC counter reaches 500—I utilized motion paths within Storyline for seamless transitions. The ELC counter animation was implemented using GSAP, targeting the text variable for precise control. All graphics were designed and customized in Canva. The background features a children’s chorus performing a haunting rendition of Sting’s 1987 song "Fragile" (as heard in the Adolescence TV series). Additional sound effects and music were sourced from Pixabay.Fixing 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:
Find the Dog
Taking a breather after some intense experimenting with the morph transition! Here’s a simplified version of the classic shell game (I think that’s what it’s called?). I remember watching it as a kid — older guys would play it on the street, trying to earn a bit of extra cash. They’d use matchboxes, shuffle them around with a hidden object underneath. If you guessed right, you’d win a few coins. If not... well, better luck next time! I called it "Find a dog" for the purpose of this challenge. Find the Dog
