Forum Discussion
JavaScript help needed: button floating animation issue in Storyline
Hi everyone,
I'm currently experimenting with creating a floating animation for a button using javascript. The goal is that when learners hover over the button, it will float up slightly, and when the mouse leaves, the button will bounce back to its original position.
Here’s the JavaScript code I’m using:
let button = document.querySelector("[data-model-id='60P0mJeyWGh']");
button.addEventListener("mouseover", () => {
gsap.to(button, {
y: -0.5, // Moves the button up by 0.5 pixels (subtle effect)
duration: 1, // Animation duration
ease: "power1.inOut", // Smooth easing
yoyo: true, // Makes it come back to the original position
repeat: 1, // Repeats once to go up and back down
});
});
button.addEventListener("mouseout", () => {
gsap.from(button, { // Uses gsap.from to return to the original position
y: 0, // Moves back to the original position
duration: 1, // Duration for the return animation
ease: "power1.inOut", // Smooth easing
});
});
However, when I implement this in Storyline, the button moves WAY more than 0.5 pixels and, after several hover events, ends up moving all the way to the top of the slide.
Can anyone review my code and see if there might be an issue? I’m not sure why this is happening. I have also attached the Storyline file in case it would be helpful for review.
Thank you!
Hi HongShu-2d122fd I think the y position you have specified is not correct. You need to be adding/removing pixels from the current position by using -= or +=, like this:
button.addEventListener("mouseover", () => { gsap.to(button, { y: "-=20", // Moves the button up by 20 pixels (subtle effect) duration: 1, // Animation duration ease: "power1.inOut", // Smooth easing yoyo: true, // Makes it come back to the original position repeat: 1, // Repeats once to go up and back down }); });Hi SamHill
Thank you! I tried your approach and it works if I only hover the button for once.
However, I think using relative values ("-=5" and "+=5") causes the button to drift upwards over multiple hovers. This happens because every time I hover, the button moves up relative to its current position rather than returning to its original position.
Hi HongShu-2d122fd I only showed the "mouseover". You should still use the "mouseout" to return the button to it's previous Y location. Does that make sense?
