Forum Discussion
HongShu-2d122fd
9 months agoCommunity Member
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 ...
SamHill
9 months agoSuper Hero
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
});
});
HongShu-2d122fd
9 months agoCommunity Member
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.
- SamHill9 months agoSuper Hero
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?
Related Content
- 8 months ago