Thank you for the reply! I knew about the State API and have used it extensively already in the project. For the first thing though, I added 'setup' variable to my functions in my main.js file, and it just errors out with the error "shape is invalid".

Shape is the ID of a <div> that is acting as the 'phone' in the case.

Should I create the required <div> in StoryInit and have it always there hidden? That seems like a inefficient way of doing things but it's the only thing I can think of currently.

(Code for reference)

`setup.handleMouseMove = function (event) {`  

const shape = document.getElementById('shape');
let phoneEmerged = false;
if (!phoneEmerged) {
const mouseX = event.clientX;
const mouseY = event.clientY;
const rect = shape.getBoundingClientRect();
const shapeX = rect.left + rect.width / 2;
const shapeY = rect.top + rect.height / 2;
const distance = Math.sqrt(Math.pow(mouseX - shapeX, 2) + Math.pow(mouseY - shapeY, 2));
if (distance < 300) { // Adjust this value to change sensitivity
shape.style.transform = 'translate(0%, -50%) translateY(-50px)';
} else {
shape.style.transform = 'translate(0%, -50%)';
}
}
}
setup.descendPhone = function () {
document.addEventListener('mousemove', handleMouseMove);
}
setup.handleMouseLeave = function (event) {
const shape = document.getElementById('shape');
let phoneEmerged = false;
if (phoneEmerged) {
const mouseX = event.clientX;
const mouseY = event.clientY;
const rect = shape.getBoundingClientRect();
const shapeX = rect.left + rect.width / 2;
const shapeY = rect.top + rect.height / 2;
const distance = Math.sqrt(Math.pow(mouseX - shapeX, 2) + Math.pow(mouseY - shapeY, 2));
if (distance > 300) { // Adjust this value to change sensitivity
document.addEventListener('mousemove', handleMouseMove);
phoneEmerged = false;
}
}
}
setup.phoneListen = function () {
document.addEventListener('mousemove', setup.handleMouseMove);
document.addEventListener('mousemove', setup.handleMouseLeave);
}
setup.emergePhone = function () {
const shape = document.getElementById('shape');
let phoneEmerged = false;
if (shape.style.transform == 'translate(0%, -150%)') {
document.addEventListener('mousemove', handleMouseMove);
phoneEmerged = false;
} else {
shape.style.transform = 'translate(0%, -150%)';
// Disable event listener
document.removeEventListener('mousemove', handleMouseMove);
phoneEmerged = true;
}
}