Hi there,
I'm quite new to GSAP and i'm trying to create a button with some kind of infinite arrow animation. So the idea is that what you see is a circle button with an arrow inside of it. When you mouseenter the arrow moves x 100% and another arrow comes in from x -100% to x 0%. When you mouseleave the arrow moves to x 100% and another arrow comes in from x -100% to x 0%. So it's like a constant animation to the right. My idea was to use three containers with arrows inside of it so they can move consecutive and when the animation finishes it can restart instantly. But i think don't really get it yet.
This is my animation (i've turned off overflow hidden to see what happens to everything): https://playground.inchdesign.nl/gsap-circle-button-arrow-animation/
And this my code:
document.addEventListener("DOMContentLoaded", function() {
// DOM elements
const circleContainer = document.querySelector(".circle-container");
const icons = [document.querySelector(".icon-1"), document.querySelector(".icon-2"), document.querySelector(".icon-3")];
// Function to create a GSAP timeline for animations
function createTimeline(icons, xValue) {
const tl = gsap.timeline({ paused: true });
icons.forEach(icon => {
tl.to(icon, { duration: 0.2, x: xValue, ease: "power1.out" }, 0);
});
return tl;
}
// Create timelines
const timeline1 = createTimeline(icons, "-200%");
const timeline2 = createTimeline(icons, "0%");
// Start entering animation on mouseenter
circleContainer.addEventListener('mouseenter', () => {
timeline1.play();
});
// Reset position on mouseleave
circleContainer.addEventListener('mouseleave', () => {
timeline2.play();
});
});
I thought i found the solution when i read this post:
but i can't seem to convert it to my idea. Please help! Thanks in advance!
