Pantone COTY 2026 - Creative GSAP 3D Effect for Articulate Storyline 360
For this year's Pantone COTY E-Learning Heroes Challenge, I wanted to explore how motion and perceived depth could be pushed further within Articulate Storyline 360 with the help of the GSAP animation framework! This demo creates the illusion of a living, breathing scene that subtly responds to the user's mouse or finger movement across the screen. Combining parallax and masking techniques together with GSAP scripting, the result is an interaction where each illustrated element appears to rotate and drift in three-dimensional space, even though everything is built using flat 2D shapes. Check out the interactive version here: https://discoverelearning.com/insights/pantone-coty-2026-cloud-dancer-creative-gsap-3d-effect-for-articulate-storyline-360/Mr Plow Saves Christmas
It's that time of the year again, folks! I was a little underwhelmed when Pantone announced Cloud Dancer as their next Color of the Year, but I had a lot of fun making this snow-themed interactive quiz. It's a surprisingly versatile base color. For almost as long as I have been building MCQs in Storyline, I've enjoyed showing immediate and visible 'consequences' for right or wrong answers. In this demo, a correct answer will clear the road and allow the delivery van through. But an incorrect answer will cause a blizzard, and a naughty dog will change the color of the snow in subsequent questions. Get the final question wrong, and you'll set off the car alarm, too. These little details are designed to make it more appealing to try again if you fail. So you not only improve your knowledge, but also improve the on-screen outcomes. Anything less than 100% isn't good enough. Watch out for yellow snow! The 'Mr Plow' character was made with Powtoon. Isometric assets from Freepik. Can you clear the road and help Mr Plow save Christmas? Mr Plow Saves Christmas | EngageBrainTrain.com Happy Holidays!
Transform Your Customer Service Skills – Interactive Rise 360 Training
Step into real-world customer scenarios where your decisions shape exceptional experiences. Learn, respond, and improve your skills one decision at a time. Course Highlights Why Customer Service Matters Key Customer Service Skills Communicating Positively Handling Difficult Situations Quiz & Practical Application Summary Start Learning Today: Elevate your customer service skills and create memorable experiences with every interaction. https://www.swiftelearningservices.com/customer-service-training-rise360/Accordion FAQs
What if an accordion FAQ didn't have to look like one? For this week's challenge, I built two completely different takes. One is styled as sticky notes pinned on a corkboard, where each note peels open on click, and one is a chat conversation where tapping a question triggers a typing animation before the bot replies. Both in Storyline 360 on a 9:16 canvas, with a selection screen so you can pick which style to explore. Check it out here! Would love to connect on LinkedIn and exchange ideas!Can One Click Trigger a Cyberattack?
In today’s digital workplace, a single mistake can lead to serious business disruption. That’s why we developed a Scenario-First Cyber Awareness Activity that places learners inside a realistic cyberattack situation. Help your workforce learn how to spot threats, make safe decisions, and protect critical business data. See the Scenario-Based Training in Action https://www.swiftelearningservices.com/scenario-first-elearning-cybersecurity-awareness-training/Smarter Time Management
This interactive sample course blends audio narration with clickable activities to help learners develop better time management habits, reduce daily stress, and boost overall productivity. Learners will explore key topics through engaging, real-life scenarios. At the end of the course, they’ll reflect on their biggest time-waster and commit to one meaningful improvement they can implement in the week ahead. 👉 Click the link to start mastering your time—one habit at a time. https://www.swiftelearningservices.com/time-management-course-elearning-challenge-516/The Tool Shed Support Group
I know I always say these challenges are fun but this one was a blast! 😁 The background and heart were created by Articulate (along with the TTS). I tried using Articulate to generate the characters but it couldn't get it right so I used Nano Banana. I uploaded an image and gave it the same style prompt as Articulate's 3D Animation style. To get the different expressions, I just kept prompting Nano Banana to "keep everything the same and make it look (insert emotion here)." Once I downloaded each expression, I opened the image and used MS Designer to remove the background. I stacked the images and overlapped the fade in/out animation so the transition from one expression to another was smoother than changing states.The South Africa Big 5
Hello! I'm currently sitting in Joburg Airport, waiting for my flight back to the UK after a terrific week in South Africa with New Leaf Technologies. After the Learning Indaba, I was very fortunate to spend some time with the team at Kwalata Game Lodge in Dinokeng Game Reserve. Inspired by that experience, here's my demo for this week's Accordion Challenge. This demo uses JavaScript to 'shuffle' the five parts of the accordion, reordering their z-index positions, so that the selected part always appears beneath the other four. var player = GetPlayer(); var animalValue = player.GetVar("ANIMAL"); var ids = { GrassFgd: "6HxcFGzoBsU", ELEPHANT: "6YFFSsUIcdG", RHINO: "6f62e0IMC4F", LION: "5ohBXuBxrO4", BUFFALO: "6moj2Qru7Il", LEOPARD: "6DwuJlPK3xT", GrassBgd: "64KgCoIDN33" }; // Priority order: index 0 = highest z-index (frontmost) var animalOrder = ["ELEPHANT", "RHINO", "LION", "BUFFALO", "LEOPARD"]; function getEl(id) { return document.querySelector('[data-model-id="' + id + '"]'); } function getZ(id) { var el = getEl(id); if (!el) return 0; return parseInt(window.getComputedStyle(el).zIndex) || 0; } function setZ(id, z) { var el = getEl(id); if (el) el.style.zIndex = z; } var zBgd = getZ(ids.GrassBgd); var zFgd = getZ(ids.GrassFgd); var zBase = zBgd + 1; // zBase+0 = selected (back), zBase+1..4 = others low to high // So Elephant (highest priority) gets zBase+4 when not selected, etc. if (!animalValue || animalValue.trim() === "") { // Reset: Elephant highest, Leopard lowest in the group for (var i = 0; i < animalOrder.length; i++) { // i=0 (Elephant) gets highest: zBase+4, i=4 (Leopard) gets zBase+0 setZ(ids[animalOrder[i]], zBase + (animalOrder.length - 1 - i)); } } else { var selected = animalValue.trim().toUpperCase(); // Selected goes to the very back of the group setZ(ids[selected], zBase); // Remaining animals keep their relative order, stacked above var zCounter = zBase + 1; // Walk from lowest priority to highest (Leopard up to Elephant) // so that Elephant ends up with the highest z-index for (var i = animalOrder.length - 1; i >= 0; i--) { if (animalOrder[i] !== selected) { setZ(ids[animalOrder[i]], zCounter); zCounter++; } } } // Re-pin grass layers setZ(ids.GrassBgd, zBgd); setZ(ids.GrassFgd, zFgd); Each section of the accordion is also made using an SVG image, as the transparent areas of a PNG image would have blocked users from clicking any sections beneath it. Right! I have a flight to catch! Visit the Game Reserve here: https://bit.ly/elhc544
Gamified Digital Dashboard / Meet the Squad 🎮💻
Hi everyone! 👋 Here is my entry for Challenge #543. I wanted to step away from the traditional corporate org chart and try something more gamified and dynamic. I designed a digital dashboard inspired by video games and sci-fi interfaces to introduce our elite squad. In this interaction, users are guided by "A.I.L.A." (our AI host), who helps them explore the profiles and stats of our core team: Emperatriz, Fernando, Christian, and myself. Behind the scenes (The Tech Stuff): To bring this cyberpunk/digital aesthetic to life, I combined motion graphics with custom code in Storyline: Holographic Videos: The character holograms were fully animated and rendered in After Effects to get that perfect sci-fi glow and smooth movement. Smooth UI Animations: I used Vanilla JavaScript and GSAP natively within Storyline to animate the interface panels. By manipulating coordinates and autoAlpha, the UI boxes smoothly slide in and float into place, giving the dashboard a very responsive and modern feel. You can check out the interactive demo here: 🔗 Gamified Digital Dashboard / Meet the Squad I really enjoyed mixing visual design, interactive storytelling, and a bit of code. I would love to hear your feedback! 🚀POSH Awareness Training: Scenario-First eLearning Course
One incident can impact your entire workplace. Train employees to recognise, respond to, and prevent workplace harassment. Explore POSH Scenario Training https://www.brilliantteams.com.au/posh-awareness-training-scenario-first-elearning-course/
