How to Add Mouse Cursor Animation in Articulate Storyline 360 Using JavaScript

Step 1: Open Your Storyline Project

● Launch Storyline 360
● Open your .story file
● Navigate to the target slide

Step 2: Add a JavaScript Trigger

● Select the slide
● Open the Triggers panel
● Click “Create New Trigger”
● Set:

• Action: Execute JavaScript
• When: Timeline starts

If you’re unsure about triggers, revisit Storyline 360 JavaScript triggers guide before proceeding.

Step 3: Insert the Cursor Animation JavaScript Code into the JavaScript Editor

To implement effects efficiently, understanding scripting basics is helpful, see Storyline JavaScript best practices.

Type 1: Basic Cursor Effect

How It Works:
This effect changes how the cursor looks or behaves when moving across the slide.

Steps:
● Add a trigger → Execute JavaScript
● Paste the following JavaScript code

(function () {
// �� Run only once
if (window.__cursorInitialized) return;
window.__cursorInitialized = true;
const container = document.body;
let mouseX = 0, mouseY = 0;
let currentX = 0, currentY = 0;
let prevMouseX = 0, prevMouseY = 0;
let dpr = window.devicePixelRatio || 1;
/* =========================
CURSOR
========================= */
let cursor = document.querySelector(“.global-cursor”);
if (!cursor) {
cursor = document.createElement(“div”);
cursor.classList.add(“global-cursor”);
Object.assign(cursor.style, {
position: “fixed”,
width: “30px”,
height: “30px”,
borderRadius: “50%”,
pointerEvents: “none”,
zIndex: “9999”,
filter: “blur(5px)”
});
document.body.appendChild(cursor);
}
/* =========================
CANVAS
========================= */
let canvas = document.querySelector(“.global-trail”);
if (!canvas) {
canvas = document.createElement(“canvas”);
canvas.classList.add(“global-trail”);
Object.assign(canvas.style, {
position: “fixed”,
top: “0”,
left: “0”,
pointerEvents: “none”,
zIndex: “9998”
});
document.body.appendChild(canvas);
}
const ctx = canvas.getContext(“2d”);
/* =========================
RESIZE
========================= */
function resizeCanvas() {
dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width = window.innerWidth + “px”;
canvas.style.height = window.innerHeight + “px”;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resizeCanvas();
window.addEventListener(“resize”, resizeCanvas);
/* =========================
MOUSE TRACK
========================= */
document.addEventListener(“mousemove”, (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
/* =========================
ANIMATION
========================= */
function animate() {
const dx = mouseX – prevMouseX;
const dy = mouseY – prevMouseY;
const speed = Math.sqrt(dx * dx + dy * dy);
const lag = Math.min(speed / 50, 0.2);
currentX += (mouseX – currentX) * (0.1 + lag);
currentY += (mouseY – currentY) * (0.1 + lag);
const hue = (Date.now() / 8) % 360;
// cursor
cursor.style.transform =
`translate(${currentX – 15}px, ${currentY – 15}px)`;
cursor.style.background =
`hsla(${hue}, 100%, 60%, 0.7)`;
prevMouseX = mouseX;
prevMouseY = mouseY;
/* ===== TRAIL ===== */
ctx.globalCompositeOperation = “destination-out”;
ctx.fillStyle = “rgba(0,0,0,0.2)”;
ctx.fillRect(0, 0, canvas.width / dpr, canvas.height / dpr);
ctx.globalCompositeOperation = “lighter”;
ctx.beginPath();
ctx.arc(currentX, currentY, 12, 0, Math.PI * 2);
ctx.fillStyle = `hsla(${hue}, 100%, 60%, 0.2)`;
ctx.shadowBlur = 20;
ctx.shadowColor = `hsla(${hue}, 100%, 60%, 0.8)`;
ctx.fill();
ctx.shadowBlur = 0;
requestAnimationFrame(animate);
}
animate();
/* =========================
CLICK PULSE (FIXED)
========================= */
document.addEventListener(“click”, (e) => {
const x = e.clientX;
const y = e.clientY;
const pulse = document.createElement(“div”);
Object.assign(pulse.style, {
position: “fixed”,
left: (x – 20) + “px”,
top: (y – 20) + “px”,
width: “40px”,
height: “40px”,
borderRadius: “50%”,
border: “2px solid white”,
pointerEvents: “none”,
zIndex: “10000”,
animation: “pulseAnim 0.6s ease-out”
});
document.body.appendChild(pulse);
setTimeout(() => pulse.remove(), 600);
});
/* =========================
CSS (ADD ONLY ONCE)
========================= */
if (!document.querySelector(“#cursor-style”)) {
const style = document.createElement(“style”);
style.id = “cursor-style”;
style.innerHTML = `
@keyframes pulseAnim {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
`;
document.head.appendChild(style);
}
})();

● Click OK

Result:
Once the trigger executes:
● The mouse cursor transforms visually
● Effects appear dynamically while moving across the slide

Best for: Use this in UI-heavy slides, paired with interactive eLearning design tips.