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/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!RISE Course Starter Using Pantone Cloud Dancer
Hello everyone, For challenge #535, I’ve been experimenting with colour combinations while staying true to the lesson’s theme. I focused on various text features, keeping things simple and easy on the eyes. To create a pleasant visual palette, I chose soft shades with Cloud Dancer as the foundational colour. I’m excited about the possibility of further developing this course and making it more engaging with fun activities. I would really appreciate any feedback on my initial work! Course SampleMr 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/Haunted Hayride
Learners hop on a Haunted Hayride and risk their lives at each stop to make it through to the end. This course was created for a sales promotion at my organization; we wanted learners to refresh their consumer and business loan knowledge and pass some fun (and spooky) challenges along the way. I had a lot of fun with the AI tools! https://360.articulate.com/review/content/d98b8200-3c27-478d-bc39-b4b8ce4c051a/reviewVector Graphics for Onboarding
I created a custom library of vector-based characters to support an onboarding course, ensuring a consistent visual style aligned with the overall learning experience. Using Adobe Illustrator, I designed scalable assets that could be easily adapted across different modules and scenarios. To enhance engagement, I then imported these assets into Adobe Animate, where I developed simple, purposeful animations that added motion and personality without distracting from the instructional content. This approach allowed me to maintain visual consistency while introducing dynamic elements that helped bring the onboarding experience to life. LinkRace Back To Base
Hello! Can you make it back to base before the sandstorm hits? Play now. The thing I really love about working with vectors is how scalable they are. Even the tiniest details remain crystal clear when you scale them up. I built this demo using elements from a single vector pack created by Macrovector on Freepik. To create the illusion of movement, I used PowerPoint to recolour the wheels on the Mars Rover vehicle, and isolated parts of the tyre track. I then made a GIF using these shapes. And then placed the GIF over the modified SVG image in Storyline. This allowed me to turn the motion on/off using state changes. Pretty much everything that moves in this demo is a GIF, tucked away in a state change until it's needed. Having access to high-quality, easy-to-use graphics allowed me to focus on the instructional elements and the scoring mechanic. The 'wronger' your answer, the quicker your oxygen will deplete. Even if you reach the third question, if your oxygen hits zero, you will have to start again. This is controlled by JavaScript, which adjusts the value of the variable by a set amount when triggered. var player = GetPlayer(); var penalty = 35; // Change to 45 or 55 depending on the button var battery = player.GetVar("Battery"); var elapsed = 0; var interval = 100; var steps = 10000 / interval; var amountPerStep = penalty / steps; var timer = setInterval(function() { elapsed++; battery = Math.max(0, battery - amountPerStep); if (battery === 0) { player.SetVar("Battery", 0); clearInterval(timer); } else if (elapsed >= steps) { player.SetVar("Battery", Math.round(battery)); clearInterval(timer); } else { player.SetVar("Battery", Math.round(battery)); } }, interval); The eagle-eyed among you will have also noticed that when this demo runs on a desktop, the closed captions that accompany the narration have been repositioned and have a slight 'glitch' effect as they appear. This is also achieved with JavaScript. Despite the recent improvements to the closed caption feature in Storyline, sometimes I prefer to manually override the position of the captions to better suit my layout. This code only reliably works in desktop view, though. const mobileView = window.innerWidth < 768 || window.innerHeight < 500; var storyW = 1280; var storyH = 720; var boxLeft = 850; var boxTop = 430; var boxWidth = 350; var boxHeight = 200; var captionFontSize = 20; function positionCaptions() { if (mobileView === true) { console.log("Mobile view detected - caption positioning skipped."); return; } var leftPct = (boxLeft / storyW * 100).toFixed(2) + "%"; var topPct = (boxTop / storyH * 100).toFixed(2) + "%"; var widthPct = (boxWidth / storyW * 100).toFixed(2) + "%"; const css = ` .caption-container { position: absolute !important; transform: none !important; } .caption { position: absolute !important; left: ${leftPct} !important; top: ${topPct} !important; width: ${widthPct} !important; font-size: ${captionFontSize}pt !important; transform: none !important; z-index: 1000 !important; } @keyframes glitchstutter { 0% { opacity: 0; transform: translate(-10px, 4px) skewX(-8deg); filter: blur(6px); } 8% { opacity: 0.8; transform: translate( 10px, -4px) skewX( 9deg); filter: blur(3px); } 12% { opacity: 0; transform: translate(-8px, 2px) skewX(-6deg); filter: blur(7px); } 18% { opacity: 0.9; transform: translate( 8px, 3px) skewX( 6deg); filter: blur(1px); } 22% { opacity: 0.1; transform: translate(-12px, -2px) skewX(-10deg); filter: blur(5px); } 28% { opacity: 1; transform: translate( 6px, 0px) skewX( 4deg); filter: blur(1px); } 35% { opacity: 0.3; transform: translate(-6px, 4px) skewX(-6deg); filter: blur(3px); } 42% { opacity: 1; transform: translate( 4px, -2px) skewX( 3deg); filter: blur(1px); } 50% { opacity: 0.6; transform: translate(-3px, 1px) skewX(-2deg); filter: blur(1px); } 60% { opacity: 1; transform: translate( 2px, 0px) skewX( 1deg); filter: blur(0px); } 75% { opacity: 0.95; transform: translate(-1px, 0px) skewX( 0deg); filter: blur(0px); } 100% { opacity: 1; transform: translate( 0px, 0px) skewX( 0deg); filter: blur(0px); } } .caption-glitch { animation: glitchstutter 0.6s ease-out forwards !important; } `; let style = document.getElementById('custom-caption-style'); if (!style) { style = document.createElement('style'); style.id = 'custom-caption-style'; document.head.appendChild(style); } style.textContent = css; var capEl = document.querySelector('.caption'); if (capEl) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { capEl.classList.remove('caption-glitch'); void capEl.offsetWidth; capEl.classList.add('caption-glitch'); }); }); observer.observe(capEl, { childList: true, subtree: true, characterData: true }); capEl.classList.add('caption-glitch'); } console.log(`Captions positioned at left:${leftPct} top:${topPct} font:${captionFontSize}pt`); } document.addEventListener('DOMContentLoaded', positionCaptions); positionCaptions(); I had a lot of fun making this. It still surprises how much mileage you can get from a small number of visual assets. If you have any more questions about this demo, please ask.
